Question

我有一个元素点击事件，只需点击一次即可触发两次，这是搜索的一个常见问题，但我已经排除了其他答案的潜在原因。代码是

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...
  }
}

加载页面并单击“label.tiletype”时，日志为

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

由于“注册标签点击”只发生一次，因此不能因任何原因将点击绑定两次。

由于pageX和pageY坐标是相同的，因此double事件来自同一个物理点击，而不是在元素上调用第二个程序性click（）（我认为，如果错误则纠正我）。

调试行仅在此特定位代码中，因此没有其他点击事件触发。

我已经检查过Firebug中的源代码，并且有多个“label.tiletype”元素，但屏幕上没有重叠，它们都显示：block和float：left。

JavaScript文件中还有其他一些事情发生（第375行https://github.com/okohll/agileBase/blob/200dd1c6c1a8968bc9d8f5b2b3d9188ac4776984/gtpb_clientside/resources/simple/simple.js），但无论发生什么，上述声明必须始终符合逻辑。

在Firefox和Safari中都会发生这种情况。

我错过了什么？

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

Answer 1

根据this site $(document).ready的双重用法可能是原因。首先解开你的功能，试着避免它：

$('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...
}

Answer 2

啊，发现了！标签内部包含一个输入，其中一个事件是由于点击该传播而产生的。

添加

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

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

修复它。感谢提示做一个jsfiddle，我最初认为我无法复制它。

Answer 3

你的代码中有语法错误，它应该是

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...
});

但是这段代码按预期工作（只触发一条“标签点击”消息）。因此，您应该检查代码的其余部分或HTML代码的有效性（例如，未关闭的标签可能会导致此行为）。

Answer 4

您可以使用on()

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

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

jQuery点击两次，但只注册一次

4 个答案: