Один объект, несколько событий onclick - PullRequest
Новая
       4

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

0 голосов
/ 21 июня 2011

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

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

вот мой код: 

 <!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>

Ответы [ 3 ]

0 голосов
/ 21 июня 2011

Независимо от того, сколько событий кликов вы поместили на один и тот же объект, они всегда будут срабатывать одновременно.Вам нужно сохранить свое состояние в переменной, чтобы оно стало доступно при следующем вызове события 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);
    }
);
0 голосов
/ 21 июня 2011

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

<!--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/

0 голосов
/ 21 июня 2011

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

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

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

изнасиловать.

...