jQuery click fires twice but only registered once

问题

I have an element click event that's firing twice on a single click, a common issue from searching, but I've ruled out may of the potential causes from other answers. The code is

console.log("registering label click");
$("label.tiletype").click(
  function(event) {
    event.stopPropagation(); // stop the .tile click being called
    console.log("label clicked, x = " + event.pageX + ", y = " + event.pageY);
    // more code...
  }
}

When the page is loaded and the "label.tiletype" clicked, the log is

registering label click
label clicked, x = 679, y = 172
label clicked, x = 679, y = 172

Since "registering label click" only happens once, it can't be that the click is bound twice for any reason.

Since the pageX and pageY co-ordinates are the same, the double event occurs from the same physical click, not a second programatic click() being called on the element (I think, correct me if wrong).

The debug lines are only in this particular bit of code so there is no other click event firing.

I have checked the source in Firebug and there are multiple "label.tiletype" elements but none overlap on the screen, they are all display:block and float:left.

There is other stuff happening in the JavaScript file (line 375 https://github.com/okohll/agileBase/blob/200dd1c6c1a8968bc9d8f5b2b3d9188ac4776984/gtpb_clientside/resources/simple/simple.js) but whatever else is happening, the above statements must always be true logically.

This happens both in Firefox and Safari.

What have I missed?

JSFiddle: http://jsfiddle.net/okohll/cKgAp/

回答1:

according to this site a double use of $(document).readycould be the cause. try avoiding it by unbinding your function first:

$('label.tiletype').unbind('click').bind('click',
function(event) {
  event.stopPropagation(); // stop the .tile click being called
  console.log('label clicked, x = ' + event.pageX + ', y = ' + event.pageY);
  // more code...
}

回答2:

Ah, found it! The label has an input wrapped inside and one of the events was due to a click on that propagating up.

Adding

$("label.tiletype input").click(function(event) {
  event.stopPropagation();
});

to http://jsfiddle.net/okohll/cKgAp/

fixes it. Thanks for the prompt to do a jsfiddle, I initially thought I wouldn't be able to replicate it.

回答3:

Your code has syntax error in it, it shall be

console.log("registering label click");
$("label.tiletype").click(function(event) {
    event.stopPropagation(); // stop the .tile click being called
    console.log("label clicked, x = " + event.pageX + ", y = " + event.pageY);
    // more code...
});

But this code works as expected (only one "label clicked" message is triggered). So you should probably check the rest of your code or HTML code validity (for example, unclosed label may cause this behavior).

回答4:

You can use on()

$("label.tiletype").on('click', function (event) {
   alert("label clicked, x = " + event.pageX + ", y = " + event.pageY);
});

http://jsfiddle.net/cKgAp/6/

来源：https://stackoverflow.com/questions/15724406/jquery-click-fires-twice-but-only-registered-once

标签

jquery

click