Question

我目前正在使用jQuery使div可点击，在这个div我也有锚点。我遇到的问题是，当我点击一个锚点时，两个点击事件都会被触发（对于div和锚点）。如何在单击锚点时阻止div的onclick事件触发？

这是破碎的代码：

的JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 1

事件冒泡到DOM附加了点击事件的最高点。因此，在您的示例中，即使您在div中没有任何其他明确可单击的元素，div的每个子元素都会将它们的click事件向上冒泡到DOM，直到DIV的click事件处理程序捕获它为止。

这有两个解决方案是检查实际发起事件的人。 jQuery传递一个eventargs对象以及事件：

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

您还可以将单击事件处理程序附加到您的链接，这些处理程序在执行自己的处理程序之后将它们告诉stop event bubbling：

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

Answer 2

使用stopPropagation方法，请参阅示例：

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

正如jQuery Docs所说：

stopPropagation方法可防止事件冒泡DOM 树，防止任何父处理程序被通知事件。

请记住，它不会阻止其他侦听器处理此事件（例如，按钮的多个单击处理程序），如果不是所需的效果，则必须使用{{ 1}}而不是。

Answer 3

这里我的解决方案适合所有人寻找非jQuery代码（纯javascript）

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

如果点击父母的孩子，您的代码将不会被执行

Answer 4

如果您不想在任何情况下与内部元素交互，那么CSS解决方案可能对您有用。

只需将内部元素设置为pointer-events: none

即可

在你的情况下：

.clickable > a {
    pointer-events: none;
}

或通常针对所有内部元素：

.clickable * {
    pointer-events: none;
}

使用ReactJS进行开发时，这个简单的黑客为我节省了大量时间

可以在此处找到浏览器支持：http://caniuse.com/#feat=pointer-events

Answer 5

使用return false;或e.stopPropogation();将无法执行更多代码。它将在此时停止流动。

Answer 6

如果可点击的div中有多个元素，则应执行以下操作：

$('#clickable *').click(function(e){ e.stopPropagation(); });

Answer 7

如果有人需要写作（为我工作）：

event.stopImmediatePropagation()

来自this解决方案。

Answer 8

以下是使用Angular 2 +

的示例

例如，如果您想在用户点击其外部时关闭模态组件：

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

Answer 9

您需要阻止事件到达（冒泡）到父（div）。请参阅有关冒泡here和jQuery特定API信息here的部分。

Answer 10

您可以检查目标是否不是您的div元素，然后在父项上发出另一个click事件，之后您将从句柄中“返回”。

$('clickable').click(function (event) {
    let div = $(event.target);
    if (! div.is('div')) {
       div.parent().click();
       return;
    }
    // Then Implement your logic here
}

Answer 11

var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);

function innerFunction(event){
  event.stopPropagation();
  console.log("Inner Functiuon");
}

function outerFunction(event){
  console.log("Outer Functiuon");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
  <div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>

Answer 12

如果在嵌入式上下文中，请在HTML中尝试以下操作：

onclick="functionCall();event.stopPropagation();

Answer 13

当 ev.currentTarget 不可用时（React 等），我与 this 进行比较。

$("#clickable").click(function(e) {
    if (e.target === e.currentTarget) {
        window.location = url;
        return true;
    }
})

Answer 14

这是一个对我有用的非 jQuery 解决方案。

<div style="background:cyan; width:100px; height:100px;" onclick="if (event.srcElement==this) {console.log('outer');}">
    <a style="background:red" onclick="console.log('inner');">Click me</a>
</div>

Answer 15

如果单击子元素，则事件会上升到父元素和event.target！== event.currentTarget。

因此在您的函数中，您可以检查一下并提早返回，即：

var url = $("#clickable a").attr("href");
$("#clickable").click(function(event) {
    if ( event.target !== event.currentTarget ){
        // user clicked on a child and we ignore that
        return;
    }
    window.location = url;
    return true;
})

Answer 16

这就是你要找的

mousedown 事件。这适用于每个 DOM 元素，以防止像这样的 javascript 焦点处理程序：

$('.no-focus').mousedown(function (e) {
   e.prevenDefault()

   // do stuff
}

在 vue.js 框架中，您可以像这样使用修饰符：

<span @mousedown.prevent> no focus </span>

<块引用>

请注意，在输入上使用将阻止文本选择处理程序

Answer 17

e.stopPropagation()是正确的解决方案，但是如果您不想将任何事件处理程序附加到内部锚点，则只需将此处理程序附加到外部div：

e => { e.target === e.currentTarget && window.location = URL; }

Answer 18

内联替代项：

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

Answer 19

ignoreParent（）是纯JavaScript解决方案。

它用作将鼠标单击的坐标与子元素的坐标进行比较的中间层。两个简单的实现步骤：

1。。在页面上放置ignoreParent（）代码。

2。，而不是父母原始的 onclick =“ parentEvent（）;” ，写：

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

您可以将任意数量的子元素的ID传递给该函数，并排除其他子元素。

如果您单击子元素之一，则父事件不会触发。如果您单击父级，但未单击任何子级元素（作为参数提供），则会触发父级事件。

ignoreParent() code on Github

Answer 20

万一有人使用React遇到了这个问题，这就是我解决的方法。

scss：

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

组件的render（）：

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

通过为子模式（内容div）添加一个onClick函数，可以防止鼠标单击事件到达父元素的“ closeLogin”功能。

这帮了我大忙，我能够用2个简单的div创建一个模态效果。

Answer 21

要将某个子元素指定为unlickable，请编写css层次结构，如下例所示。

在这个例子中，我停止传播到具有类“.subtable”的表中tr内部的td内的任何元素（*）

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

Answer 22

所有解决方案都很复杂，而且是jscript。这是最简单的版本：

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

Answer 23

添加a，如下所示：

<a href="http://foo.com" onclick="return false;">....</a>

来自return false;的点击处理程序的

或#clickable，如：

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

Answer 24

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>

如何在单击子锚点时阻止父级的onclick事件触发？

24 个答案: