- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
以前从未遇到过这个问题,有人可以给我任何指示吗?
我正在创建一个网络应用程序,用于制作笔记,例如将笔记发布到白板上。目前,生成按钮将生成注释,但我想让用户可以单击 Canvas (白板)上的任意位置,并且它将在该位置生成新注释。
这是代码:-
$("#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();
});
当用户单击其中一个注释时,就会出现问题,因为每次用户单击注释时,注释都会克隆到 Canvas 中,从而创建另一个注释。我想停止这种行为,并且仅在用户单击空白 Canvas 区域时创建注释。我尝试过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, top:y, "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()
,因为前者隐式调用为您调用后者。)
关于jQuery stopPropagation()?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9847152/
以前从未遇到过这个问题,有人可以给我任何指示吗? 我正在创建一个网络应用程序,用于制作笔记,例如将笔记发布到白板上。目前,生成按钮将生成注释,但我想让用户可以单击 Canvas (白板)上的任意位置,
我有一个从左侧滑入的侧 Pane ,使用 get() 动态添加内容。我希望 Pane 外的所有单击都可以通过触发函数来使其关闭。根据我读到的其他问题,我想出了以下代码。 $('html').click
我将两个事件处理程序绑定(bind)到“keydown”上的输入字段。如果已按下 Enter 键,则第一个事件处理程序需要停止事件的传播,以便它不会影响第二个事件处理程序。我这样做是这样的: if (
我在 div 内有一个带有“element”类的 anchor 。 Log Out 我使用以下代码来处理注销。 jQuery(".element").click
我有一个 div,里面有一个链接: Lol 单击 应该去某个地方,但是点击 child 应该去 www.lol.com。我从previous questions看到和 jQuery web
我想在单击图像时停止冒泡。我无法在 href 上设置 javascript void,因为这是必需的。我已经使用了 stopPropagation 但它不起作用。 function showurl(e
我有一个包含很多 e.stopPropagation 的页面,所以我决定要做的是创建一个函数。这是代码 function stopProp(name) { if($(e.target).hasCla
是否可以在不阻止默认事件行为的情况下停止事件传播? 这应该让输入在滚动时递增/递减,但阻止它冒泡到任何其他元素并滚动外部 div。 (我认为以下内容仅适用于 Chrome) $("input[type
在上图中,父dom节点有其事件,子节点也有。 我可以在 Child 中使用 stopPropagation 来防止冒泡。 但在这种情况下,如果有太多 child ,就应该写太多 stopPropaga
我不明白 stopPropagation 是做什么的。为什么我需要在这段代码中使用 stopPropagation() ?。如果我不使用它,回车键第一次就不起作用。这是代码:http://codepe
我在 foreach 循环中创建了一些 Tiles: @foreach (var a in Model.AA) { } 每个图
每当在一列数据下单击 show/less 时,我都会尝试避免每个特定行上发生 onClick 事件。我有一个基本上具有选择和多选功能的网格。其中一列还可以显示更多/显示更少。每当我单击显示更多/更少时
我正在使用以下color picker它工作正常,但是当我单击颜色选择器图标时,我不希望它冒泡到主体。所以我尝试了以下方法,现在颜色选择器无法工作。 检查http://jsfiddle.net/CWG
如何在不触发其容器上的 click 事件的情况下监听复选框上的 change 事件? Hello world 我想触发复选框的 change 事件的操作,但我不希望它冒泡到标签上的 click 事件
我有一些 html 看起来像这样(简化) 我的 CSS 看起来像这样: .as
我想知道是否有人可以帮助最终解决我前阵子在 SO 上提出的问题。 我无法通过单击按钮外部或页面上的其他任何位置来取消切换这些下拉菜单。 请看这个 jsFiddle . 我见过人们使用 stopProp
我是 Javascript 的新手,我正在尽我最大的努力培养对事件在 jquery 中的工作方式的直觉。我正在开发一个交互式用户界面,允许用户编辑附加到组件单元格的对象。在我的代码中,我创建了一个包含
我使用 jquery 来隐藏和显示侧边栏,如果我在外部单击或调整侧边栏隐藏的大小,但我遇到了一个问题,所以我的所有下拉列表都停止了,因为我使用了 stopPropagation 我的 HTML 是 $
我有一些 jQuery 代码来关闭我的菜单: $('body').click(function(){ $('#menu').hide(); }); $("#menu").click(functio
我有以下代码,其中我有一个标签,我可以在其中阻止默认操作,这样我就可以在单击而不是输入时专注于可编辑范围。但是,如果用户单击跨度,我希望它忽略绑定(bind)到父级的单击事件,因此我使用 stopPr
我是一名优秀的程序员,十分优秀!