Як я не можу запобігти запусканню події onclick батьків при натисканні на якір дитини?

Наразі я використовую jQuery, щоб зробити ключ, який можна натиснути на 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>

Пузир подій переходить до найвищої точки DOM, на якій додано подію натискання. Отже, у вашому прикладі, навіть якщо у діві не було явно інших елементів, які можна чітко натискати, кожен дочірній елемент діва буде перетворювати свою подію клацання до DOM до тих пір, поки обробник подій клацання DIV не застане її.

Є два варіанти вирішення цього питання - перевірити, хто насправді став причиною події. 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;
});

Ви також можете приєднати обробник подій клацання до ваших посилань, який наказує їм припинити спливання подій після виконання власного обробника:

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

Використовуйте метод stopPropagation , див. Приклад:

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

За словами jQuery Docs:

stopPropagation метод запобігає події з бульбашкою дерева DOM, запобігаючи повідомленню будь-яких батьківських обробників про подію.

Майте на увазі, що це не заважає іншим слухачам обробляти цю подію (наприклад, більше ніж один обробник клацання для кнопки), якщо це не бажаний ефект, ви повинні використовувати stopImmediatePropagationзамість цього.

Ось моє рішення для всіх, хто шукає не jQuery-код (чистий javascript)

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

Ваш код не буде виконаний, якщо натиснути на батьків батьків

Ви також можете спробувати це

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

Якщо ви не маєте наміру взаємодіяти з внутрішнім елементом / і в будь-якому випадку, то CSS-рішення може бути корисним для вас.

Просто встановіть внутрішній елемент / с на pointer-events: none

у вашому випадку:

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

або загалом орієнтуватися на всі внутрішні елементи:

.clickable * {
    pointer-events: none;
}

Цей простий хакер врятував мені багато часу під час розвитку з ReactJS

Підтримку веб-переглядача можна знайти тут: http://caniuse.com/#feat=pointer-events

Якщо у розділі, який можна натиснути, у вас декілька елементів, слід зробити це:

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

Використання return false;або e.stopPropogation();не дозволить виконувати подальший код. Він зупинить потік в цій точці сам.

Написання, якщо хтось потребує (працював на мене):

event.stopImmediatePropagation()

З цього рішення.

Вбудована альтернатива:

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

Ось приклад використання 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();
}

Потрібно зупинити події, щоб досягти (бульбашки до) батьків (діва). Ознайомтеся з частиною про бульбашку тут , а також інформацію про API jQuery тут .

Щоб вказати якийсь піделемент як нерозбірливий, запишіть ієрархію css, як у наведеному нижче прикладі.

У цьому прикладі я зупиняю розповсюдження будь-яких елементів (*) всередині td всередині tr всередині таблиці з класом ".subtable"

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

});

ignoreParent () - це чисте рішення JavaScript.

Він працює як посередницький рівень, який порівнює координати клацання миші з координатами дочірнього елемента / с. Два прості етапи впровадження:

1. Помістіть код ignoreParent () на свою сторінку.

2. Замість початкового батьківського onclick = "parentEvent ();" , напишіть:

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

Ви можете передавати ідентифікатори будь-якої кількості дочірніх елементів у функцію та виключати інші.

Якщо ви натиснули один із дочірніх елементів, батьківська подія не спрацьовує. Якщо ви натиснули на батьківський, але не на будь-який з дочірніх елементів [надано як аргументи], батьківська подія запускається.

код ignoreParent () в Github

Якщо це вбудований контекст, спробуйте в HTML:

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

У випадку, якщо у когось виникло це питання, використовуючи 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() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

Додавши функцію onClick для дочірнього модального (поділу вмісту) подій клацання миші, не можна досягти функції "closeLogin" батьківського елемента.

Це зробило для мене хитрість, і я зміг створити модальний ефект за допомогою 2 простих дівок.

додати 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;
   });

Всі рішення складні і з jscript. Ось найпростіша версія:

var IsChildWindow=false;

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


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

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