从来没有遇到这个,任何人都可以给我任何指针吗？
我正在创建一个网络应用程序,用于将笔记发布到白板上.此时,spawn按钮将产生音符,但我想制作它以便用户可以单击画布上的任何位置(白板),它将在该位置产生一个新音符.
这是代码： –
$("#canvas").bind('click',function(e){
// Calculate offset for width,put Box to the left top corner of the mouse click.
var x = e.pageX + "px";
var y = e.pageY + "px";
$("#note").clone().insertBefore("#insertAfter").attr("id","note" + noteID).show();
$("#note" + noteID).children(".title").text("Note " + noteID);
$("#note" + noteID).css({left:x,top:y,"z-index" : zindex});
noteID++;
zindex++;
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
});
当用户点击其中一个音符时会出现问题,因为每次用户点击音符时,便会将音符克隆到画布中,从而创建另一个音符.我想停止此行为,并仅在用户单击空白画布区域时创建注释.我已经尝试过preventDefauly,stopPropagation和stopImmediate ……但是它们似乎都没有任何影响.
我也尝试过其他动作,例如音符点击,但似乎无法在正确的位置找到合适的音乐？还是我完全以错误的方式解决这个问题？
这里的例子：
http://www.kryptonite-dove.com/sandbox/animate
更新：
$('#canvas').on('click','.note',function(e) {
e.stopPropagation();
});
这解决了注释冒泡的问题,但它现在阻止了注释类上的任何点击操作,我在这里未知的水域！我将不胜感激任何有关如何让点击操作恢复为音符标题和文字工作的指示:)
解决方法
如果你想点击#canvas做点什么,但只有当点击直接在#canvas上而不是在它的孩子身上时,那么你可以使用的两个主要选项是：
>根据您的更新,您可以处理每个孩子的点击并停止传播到#canvas,但这当然会使您可能想要为孩子们做的其他处理变得复杂.
>测试event.target property以查看发起事件的DOM元素是否是#canvas元素.
所以,还注意到(与手头的问题无关)你可以而且应该链接jQuery方法而不是重新选择相同的元素：
$("#canvas").bind('click',function(e){
// if the clicked element wasn't #canvas return immediately
if (e.target != this)
return;
// Calculate offset for width,put Box to the left top corner of the mouse click.
var x = e.pageX + "px";
var y = e.pageY + "px";
$("#note").clone().insertBefore("#insertAfter")
.attr("id","note" + noteID)
.css({left:x,"z-index" : zindex})
.show()
.children(".title").text("Note " + noteID);
noteID++;
zindex++;
// You may not need any of the following any more (depending on
// what your other requirements are)
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
});
这是一个演示(有一个很简洁的JS版本,基本上只是这个答案和你的风格的功能)：http://jsfiddle.net/H6XrW/
(请注意,您不需要同时调用.stopImmediatePropagation()和.stopPropagation(),因为前者会为您隐式调用后者.)
