it-swarm.com.de

Wie kann ein Klickereignis NUR auf Eltern-DIV ausgelöst werden, nicht auf Kinder?

Ich habe ein DIV mit einer klassifizierten foobar und ein paar DIVs innerhalb dieses DIV, die nicht klassifiziert sind, aber ich nehme an, dass sie die foobar-Klasse erben:

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

Ich möchte, dass das nur ausgelöst wird, wenn Sie irgendwo in der DIV klicken, aber nicht auf die DIVs der Kinder.

164
CaptSaltyJack

Wenn e.target dasselbe Element wie this ist, haben Sie keinen Nachkommen angeklickt.

$('.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>

374
user1106925

Es gibt einen anderen Weg, der funktioniert, wenn es Ihnen nichts ausmacht, nur neuere Browser anzusprechen. Fügen Sie einfach das CSS hinzu

pointer-events: none;

an alle Kinder des Divs, an denen Sie den Klick erfassen möchten. Hier sind die Supporttabellen

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

37
hobberwickey

Sie können Bubbling zu Ihren Gunsten verwenden:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});
23
ori
//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)
});

Dadurch wird die Ausbreitung (Bubbling) des click-Ereignisses auf einem der untergeordneten Elemente des .foobar-Elements abgebrochen, sodass das Ereignis das .foobar-Element nicht erreicht, um seine Ereignisbehandlungsroutinen zu aktivieren.

Hier ist eine Demo: http://jsfiddle.net/bQQJP/

19
Jasper
$(".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
Michalis

Ich habe nicht die akzeptierte Antwort erhalten, aber das scheint den Trick zu tun, zumindest in Vanilla JS.

if(e.target !== e.currentTarget) return;
2
Jens Törnell

Mein Fall ist ähnlich, aber dies ist der Fall, in dem Sie wenige foobar- s haben und nur einen schließen möchten - pro Klick:

Finden Sie den übergeordneten Fall

$(".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'
});

Untergeordnete Fälle suchen

$(".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
Wukadin

Ich hatte das gleiche Problem und kam zu dieser Lösung (basierend auf den anderen Antworten).

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

Grundsätzlich heißt es, wenn das Ziel das div ist, dann den Code ausführen, sonst nichts tun (nicht verstecken)

0
Wonx2150

Wenn Sie pointer-events: none; nicht verwenden können und auf moderne Browser abzielen, können Sie composedPath verwenden, um einen direkten Klick auf das Objekt wie folgt zu erkennen:

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

Weitere Informationen zu compositePath finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

0
Xenxier

Sie können event.currentTarget verwenden. Es wird nur ein Klickereignis ausgeführt, das das Ereignis erhalten hat.

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

0
Dejan Markovic