一个对象，多个onclick事件

发布于 2024-11-16 09:49:44 字数 3042 浏览 0 评论 0原文

我对 javascript 相当陌生，在过去的几个小时里我一直被这个问题困扰。

我有一个地图对象，并为其附加一个事件，因此，如果用户单击地图，我想获取鼠标按钮的坐标。然后我希望用户单击地图上的另一个点以获得第二对坐标，然后我想在这两点之间画一条线。到目前为止，我可以通过单击鼠标获取第一对坐标并通过监听用户按下按钮来获取第二对坐标来完成此操作。但是我想使用两次鼠标单击。单击位置 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>

原文

I am fairly new to javascript and I have been stuck with this problem for the last couple of hours.

I have one map object and I attach one event to it, so if the user clicks on the map I want to get the coordinats of the mouse button. I then want the user to click on another point on the map to get a second pair of coordinates, I then want to draw a line between these two points. So far I am able to do this by having the mouseclick for the first pair of coordinates and getting the second pair of coordinates by listening for the user pressing a button. However I would like to use two mouse clicks. One click in location 1 to get coordinates 1 and one click in location 2 to get the coordinates 2. Everytime I have two onclick events however both of them are fired right away, and I just get a point on the map. I am using Bing map api.

here is my code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

漆黑的白昼 2024-11-23 09:49:44

你需要有某种旗帜。
因此，在处理第一个单击事件时，您将标志设置为“true”并相应地调用方法
然后在处理点击事件时，当标志已经为“假”时，即检测到第二次点击；因此相应地调用另一个方法。

为此，您不需要多个 clickEventListener。

最好的问候，

拉维什。

回复收藏 0 原文

梦里的微风 2024-11-23 09:49:44

无论您在同一个对象上放置多少次单击事件，它们总是会同时触发。您需要做的是将状态存储在变量中，以便下次调用单击事件时可用。

一个简化的示例（使用 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);
    }
);

No matter how many click events you put on the same object, they'll always fire at once. What you'll need to do is store your state in a variable, so that it's available the next time your click event is called.

A simplified example (using 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 原文

请帮我爱他 2024-11-23 09:49:44

你可以这样做：

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

you could do this:

<!--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();
  }
}

then on the object add:-