Question

大家好，我正在努力解决两个onclick事件之间的冲突。我的项目有一个画布和一个属性框。

我可以通过将元素附加到它来向画布添加元素（按下按钮）（这些元素具有类'.element'并且它们是div，并且画布也是div元素。）

所以，一旦我在画布上有一个元素，我就可以通过单击它来查看它的属性（在属性框上）。为了处理这个点击事件，我实现了以下功能：

var canvas = $('#canvas');

 $(function(){
    canvas.delegate('.element','click', function(){
    // Here I update the properties box with information of the clicked element
    // and and some css to the element so user can know that It's selected
    });
 });

现在我想实现一个函数，当我单击画布上的其他位置时，它会清除属性框（一旦没有选择元素）。我试过这样做：

$(function(){
  canvas.on('click',function(){
         //Clear properties box here
  });
});

但现在它取消了第一个功能（就像只执行第二个功能一样）。你们知道我怎么能扭转这种局面？

Answer 1

将事件作为参数添加到第一个函数的绑定中，并尝试添加#stopPropagation

canvas.on('click', '.element', function(e){
  // all your code here
  e.stopPropagation();
});

这里发生的是通过点击.element div，你触发第一个功能，但因为.element包含在画布中，你也会触发第二个绑定（清除框）。 stopPropagation可防止事件冒泡到任何父div，这将阻止您触发第二个绑定。
此外，我建议更改您委派的方式（以及我如何编写它）因为#delegate方法已被弃用。

点击事件之间的冲突

1 个答案: