一個對象，多個onclick事件

我相當新的JavaScript，我一直堅持這個問題在過去的幾個小時。一個對象，多個onclick事件

我有一個地圖對象，我附加了一個事件，所以如果用戶點擊地圖我想獲得鼠標按鈕的座標。然後我希望用戶點擊地圖上的另一個點來獲得第二對座標，然後我想在這兩點之間劃一條線。到目前爲止，我可以通過鼠標點擊第一對座標並通過聽用戶按下按鈕來獲得第二對座標。不過，我想用鼠標點擊兩下。點擊位置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」，並相應地調用方法，然後在標誌已爲'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事件

回答

相關問題