One object, multiple onclick events
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 h开发者_Python百科ref='#' onclick='HidePushPin();'>Hide Pushpins</a></div>
</body>
</html>
You need to have some kind of flag. So while handling the first click event, you set the flag to say 'true' and call a method accordingly and then while handling the click event when the flag is already 'false' i.e. you detect a second click; so call another method accordingly.
You don't need to have multiple clickEventListener for this purpose.
Best Regards,
Ravish.
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);
}
);
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:-
onclick="createLines()"
http://jsfiddle.net/WpLG3/1/
加载中,请稍侯......
精彩评论