1つのオブジェクト、複数のonclickイベント

私はかなりjavascriptを新しくしています。私は過去2〜3時間この問題を抱えています。1つのオブジェクト、複数のonclickイベント

私は1つのマップオブジェクトを持っており、それに1つのイベントをアタッチします。そのため、ユーザーがマップをクリックすると、マウスボタンのコーディネートを取得します。次に、ユーザーがマップ上の別のポイントをクリックして座標の2番目のペアを取得し、これらの2つのポイントの間に線を描きたいとします。これまでは、最初の座標ペアのマウスクリックを行い、ユーザーがボタンを押すのを聞いて座標の2番目のペアを取得することで、これを行うことができました。しかし、私は2回のマウスクリックを使用したいと思います。座標1を取得するには位置1で1回クリックし、座標2を取得するには位置2で1回クリックします.2回のonclickイベントが発生するたびに、すぐに両方が起動され、マップ上にポイントが表示されます。私はBing map 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イベントを処理しているときそれに応じて別のメソッドを呼び出します。

この目的で複数の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 *は2回目のクリックでクリアする必要があります。 :-) – 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

1つのオブジェクト、複数のonclickイベント

答えて

関連する問題