停止从子元素到父元素的事件转发

发布于 2025-01-07 04:01:58 字数 884 浏览 0 评论 0原文

让我们假设有以下代码：

<body style="overflow: hidden">
    <div class="wall">
        <button>New</button>
        <div class="prova">
            <a href="localhost">ciao !</a>
        </div>
       <div class="prova">
            <a href="localhost">miao !</a>
        </div>
    </div>
</body>

和以下 js/jquery 代码：

function onBoot()
{
    $(".prova").draggable();

    $(".wall").mousedown(onMouseDown);
    $(".wall").mouseup(onMouseUp);
}


function onMouseDown(e)
{
    console.log("down");
}

function onMouseUp(e)
{
    console.log("up");
}


$(onBoot);

现在，我正确地看到了按钮和两个 div。当我单击“wall”（父 div）时，我在控制台上看到了“向下”/“向上”，正如我所期望的那样。但是，当我单击“prova”div 和按钮时，我也在控制台上看到“向下”/“向上”。我知道“冒泡”概念，即事件从子元素转发到父元素，我想阻止它，但没有在“prova”div 上指定显式事件处理程序。是否可以？

原文

let's suppose to have following code:

<body style="overflow: hidden">
    <div class="wall">
        <button>New</button>
        <div class="prova">
            <a href="localhost">ciao !</a>
        </div>
       <div class="prova">
            <a href="localhost">miao !</a>
        </div>
    </div>
</body>

and the following js/jquery code:

function onBoot()
{
    $(".prova").draggable();

    $(".wall").mousedown(onMouseDown);
    $(".wall").mouseup(onMouseUp);
}


function onMouseDown(e)
{
    console.log("down");
}

function onMouseUp(e)
{
    console.log("up");
}


$(onBoot);

Now, I correctly see the button and the two divs.
When I click on "wall" (parent div) I see "down"/"up" on console as I expect.
However, I see "down"/"up" on console also when I click on "prova" divs and button too.
I know about "bubbling up" concept for which an event is forwarded from children to parent elements and I want to prevent it but without specifying an explicit event handler on "prova" divs.
Is it possible ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野心澎湃 2025-01-14 04:01:58

您可以检查发起者的 className，如下所示：

function onMouseDown(e)
{
  e = e || event;
  if ((e.srcElement || e.target).className === 'wall') {console.log("down");}
  return true;
}

参见 this jsfiddle

You can check the originators className, like this:

function onMouseDown(e)
{
  e = e || event;
  if ((e.srcElement || e.target).className === 'wall') {console.log("down");}
  return true;
}

see this jsfiddle

回复收藏 0 原文

一腔孤↑勇 2025-01-14 04:01:58

在事件处理程序（OnMouseDown、OnMouseUp）中，检查 e.currentTarget 是否等于 e.target。请参阅 jQuery 事件文档：

将 event.target 与此进行比较通常很有用，以便确定事件是否由于事件冒泡而得到处理。当事件冒泡时，此属性在事件委托中非常有用。

因此，例如：

function onMouseDown(e)
{
    if(e.currentTarget !== e.target)
        return;

    console.log("down");
}

In your event handler (OnMouseDown, OnMouseUp), check if e.currentTarget equals e.target. See jQuery Events documentation:

It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

So, for example:

function onMouseDown(e)
{
    if(e.currentTarget !== e.target)
        return;

    console.log("down");
}

回复收藏 0 原文

~没有更多了~

关于作者

撑一把青伞

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

停止从子元素到父元素的事件转发

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

停止从子元素到父元素的事件转发

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。