Как сделать так, чтобы событие клика срабатывало ТОЛЬКО на родительском DIV, а не на детях?


211

У меня есть DIV с классифицированным foobarи несколько DIV внутри этого DIV, которые не классифицированы, но я предполагаю, что они наследуют foobarкласс:

$('.foobar').on('click', function() { /*...do stuff...*/ });

Я хочу, чтобы это срабатывало только при нажатии где-нибудь в DIV, но не на дочерних DIV.

Ответы:


440

Если e.targetэто тот же элемент, что thisи вы, вы не нажали на потомка.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});
.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>


Этот ответ объясняет этот комментарий
Гдорон поддерживает Монику

@gdoron: Адам слишком добр. :)

1
Привет @ Вики. Просто для справки, в JavaScript есть два разных типа сравнения значений. В ===или !==используется «Алгоритм сравнения строгого равенства» , ==а !=в «Алгоритм сравнения абстрактного равенства» используется принудительный тип. Общая мудрость заключается в том, чтобы всегда использовать строгое сравнение, если нет особой необходимости в принудительном типе (поскольку его правила немного сложны) . В этом случае, поскольку объекты сравниваются, это на самом деле не имеет значения, но вы обнаружите, что большинство людей все равно будут придерживаться строгого сравнения.

1
@ Vicky: Все в порядке. Это все еще правильно. Просто позвольте вам JS имеет различные операторы. ;-)

3
Это хороший ответ, потому что он также может работать с Vanilla JS addEventListener и не является специфичным для jQuery.
Майкл Джованни Пумо

64

Есть еще один способ, который работает, если вы не возражаете, ориентируясь только на новые браузеры. Просто добавьте CSS

pointer-events: none;

любым детям div вы хотите захватить клик. Вот таблицы поддержки

http://caniuse.com/#feat=pointer-events


13
Знайте, что я должен избегать написания комментариев «спасибо», но я могу поцеловать вас за это :-)
Симона

@SimonaAdriani, а?
n3wb

Спасибо, я сделал то же самое, но я изо всех сил пытаюсь написать пример модульного теста. Как я могу убедиться, что clickпрограммный триггер события клика должен быть заблокирован?
Панкадж Паркар

29

Вы можете использовать барботирование в свою пользу:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

Это выглядит как хорошее решение для моего конкретного сценария, так как я хочу исключить только клики на дочерних <a>элементах. Есть только одна проблема: когда я нажимаю на них средним нажатием, событие все равно срабатывает (проверено в Google Chrome). Есть ли вариант этого, который также предотвращает это?
cgogolin

@cgogolin, взгляните на это: stackoverflow.com/questions/12197122/…
Джессика

28

Я не получил принятый ответ на работу, но это, кажется, делает свое дело, по крайней мере, в vanilla JS.

if(e.target !== e.currentTarget) return;

1
e.currentTarget является более точным, чем ссылка, thisпотому что объект, на который thisуказывает, может меняться в зависимости от области видимости и контекста, из которого он вызывается
eballeste

20
//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

Это остановит распространение (всплывающее) clickсобытие на любом из дочерних элементов .foobarэлемента (ов), поэтому событие не достигнет .foobarэлемента (элементов), чтобы запустить их обработчик (и) события.

Вот демо: http://jsfiddle.net/bQQJP/


3
$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

2

У меня была такая же проблема, и я нашел это решение (на основе других ответов)

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

По сути, он говорит, что если целью является div, тогда запустите код, иначе ничего не делайте (не скрывайте его)


1

Мой случай похож, но это тот случай, когда у вас есть несколько foobarключей, и вы хотите закрыть только один - за один клик:

Найти родительский случай

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

Найти детский кейс

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

1

Вы можете использовать event.currentTarget. Это будет делать событие клика только тем, кто получил событие.

target = e => {
    console.log(e.currentTarget);
  };
<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>


1

Если вы не можете использовать pointer-events: none;и ориентированы на современные браузеры, вы можете использовать composedPathдля обнаружения прямого щелчка по объекту, например так:

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

Вы можете узнать больше о compedath здесь: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath


0

// if its li get value 
document.getElementById('li').addEventListener("click", function(e) {
                if (e.target == this) {
                    UodateNote(e.target.id);
                }
                })
                
                
                function UodateNote(e) {

    let nt_id = document.createElement("div");
    // append container to duc.
    document.body.appendChild(nt_id);
    nt_id.id = "hi";
    // get conatiner value . 
    nt_id.innerHTML = e;
    // body...
    console.log(e);

}
li{
 cursor: pointer;
    font-weight: bold;
  font-size: 20px;
    position: relative;
    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;}
    
    p{
     cursor: text;
  font-size: 16px;
   font-weight: normal;
    display: block;
    max-width: 370px;
    max-height: 40px;
    overflow-x: hidden;}
<li id="li"><p>hi</p></li>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.