Один объект, несколько событий onclick

Я довольно новичок в javascript, и я застрял в этой проблеме последние пару часов.Один объект, несколько событий onclick

У меня есть один объект карты, и я присоединяю к нему одно событие, поэтому, если пользователь нажимает на карту, я хочу получить координаты кнопки мыши. Затем я хочу, чтобы пользователь нажимал на другую точку на карте, чтобы получить вторую пару координат, затем я хочу провести линию между этими двумя точками. Пока я могу это сделать, имея mouseclick для первой пары координат и получая вторую пару координат, слушая, как пользователь нажимает кнопку. Однако я хотел бы использовать два щелчка мыши. Один щелчок в местоположении 1, чтобы получить координаты 1 и один щелчок в местоположении 2, чтобы получить координаты 2. Каждый раз, когда у меня есть два события onclick, однако оба они запускаются сразу, и я просто получаю точку на карте. Я использую карту Bing api.

вот мой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" 

src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx? 

v=6.2"></script> 
    <div><script type="text/javascript"> 
    var map = null; 
    var pinid = 1; 
var pixel = null; 
var location = null; 
var location2 = null; 
var pixel2 = null; 
var point1 = null; 
var point2 = null; 
var count = 0; 


    function doSomething(e) { 
if (!e) var e = window.event; 
e.cancelBubble = true; 
if(e.stopPropagation) e.stopPropagation(); 
PixelClick1(); 
    } 

    function GetMap() 
    { 

    map = new VEMap('myMap'); 
    map.LoadMap(); 
    map.SetZoomLevel(10); 
map.AttachEvent("onclick", PixelClick1); 


//onclick="doSomething();PixelClick1; return false" 
    } 

    function onClick(){ 
count++; 
    } 



    function AddPolyline() 
    { 
    var shape = new VEShape(VEShapeType.Polyline, [location2, 
               location 
               ]); 
map.AddShape(shape); 
shape.HideIcon(); 
point1 = new VEShape(VEShapeType.Polyline,[location,location]); 
point2 = new VEShape(VEShapeType.Polyline, [location2, location2]); 

     point1.SetTitle('Point1 Location:'); 
     point2.SetTitle('Point2 Location:'); 
    point1.SetDescription('(Latitude: ' + location.Latitude + ', 

Longitude: ' + location.Longitude + ')'); 
point2.SetDescription('(Latitude: ' + location2.Latitude + ', 

Longitude: ' + location2.Longitude + ')'); 


point1.HideIcon(); 
point2.HideIcon(); 
map.AddShape(point1); 
map.AddShape(point2); 


    } 

    function PixelClick1(e){ 
e.cancelBubble = true; 
var x = e.mapX; 
var y = e.mapY; 
pixel = new VEPixel(x,y); 
location = map.PixelToLatLong(pixel); 
wait(e);  
return false; 
    } 



    function PixelClick2(e){ 
var x = e.mapX; 
var y = e.mapY; 
pixel2 = new VEPixel(x,y); 
location2 = map.PixelToLatLong(pixel2); 
AddPolyline(); 


    } 

    function ShowPushPin(){ 
point1.ShowIcon(); 
point2.ShowIcon(); 
    } 

    function HidePushPin(){ 
point1.HideIcon(); 
point2.HideIcon(); 
    }  

    function wait(){ 

    map.AttachEvent("onkeydown",PixelClick2); 

    } 

    </script></div> 
    </head> 
    <body onload="GetMap();"> 
     <div id='myMap' style="position:relative; width:400px; 

height:400px;"></div> 
<div><a href='#' onclick='ShowPushPin();'>Show Pushpins</a></div> 
<div><a href='#' onclick='HidePushPin();'>Hide Pushpins</a></div> 

</body> 
</html>

источник

2011-06-21 ddd

Пожалуйста, покажите свой код (соответствующие биты). Возможно, вы также настроили рабочий образец на http://jsfiddle.net/ – Tomalak

Вам нужно иметь какой-то флаг. Таким образом, при обработке первого события клика вы устанавливаете флаг «true» и вызывают метод соответственно , а затем при обработке события click, когда флаг уже «false», т. Е. Вы обнаруживаете второй щелчок; поэтому вызовите другой метод соответственно.

Для этой цели вам не нужно иметь несколько clickEventListener.

С наилучшими пожеланиями,

Ravish.

источник

2011-06-21 06:30:03 Ravish

Независимо от того, сколько кликов вы нажмете на один и тот же объект, они всегда будут стрелять сразу. Вам нужно будет сохранить ваше состояние в переменной, чтобы он был доступен при следующем вызове события click.

Упрощенный пример (с помощью JQuery):

var firstPoint = null; 
$('#something').mousedown(function(e) { 
    if (!firstPoint) { 
     firstPoint = {x: e.pageX, y: e.pageY}; 
    } else { 
     alert('Line from ' + firstPoint.x + ', ' + firstPoint.y + ' to ' + e.pageX + ', ' + e.pageY); 
    } 
);

источник

2011-06-21 06:31:30

Я не вижу тег jQuery в любом месте. Прослушивание события клика было бы более подходящим, и * firstPoint * должен быть очищен при втором щелчке. :-) – RobG

@RobG это простой пример, чтобы проиллюстрировать мою мысль - не полное решение проблемы. –

вы могли бы сделать это:

<!--Put this in your <head> tag--> 
var stateOfClick = null; 

function initiateLine(){ 
    document.getElementById('test').value = "Started"; 
} 

function endLine(){ 
    document.getElementById('test').value = "Line Ended"; 
} 

function createLines(){ 
    if(!stateOfClick) { 
    initiateLine(); 
    stateOfClick = 1; 
    } else { 
    endLine(); 
    } 
}

затем на объект оных: -

onclick="createLines()"

http://jsfiddle.net/WpLG3/1/

источник

2011-06-21 07:29:23

Один объект, несколько событий onclick

ответ

Смежные вопросы