Jak zatrzymać zdarzenie propagacji na checkbox kliknięcia

Question

Jak zatrzymać zdarzenie propagacji na checkbox kliknięcia

głosy

149

Mam wyboru, że chcę, aby wykonać pewne działania Ajax na zdarzenia click, jednak pole wyboru jest również wewnątrz kontenera z własnym click zachowania, że nie ma się, gdy pole jest kliknięty. Próbka ta ilustruje to, co chcę zrobić:

<html lang=en>
    <head>
        <title>Test</title>
        <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>
        <script type=text/javascript>
        $(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
            $('#header input[type=checkbox]').click(function(event) {
                // Do something
            });
        });
        </script>
        <style type=text/css>
        #container.hidden #body {
            display:none;
        }
        </style>
    </head>
    <body>
        <div id=container>
            <div id=header>
                <h1>Title</h1>
                <input type=checkbox name=test />
            </div>
            <div id=body>
                <p>Some content</p>
            </div>
        </div>
    </body>
</html>

Jednak nie mogę dowiedzieć się, jak zatrzymać zdarzenie propagacji bez powodowania domyślne zachowanie click (pole staje sprawdzane / niezaznaczone), aby nie uruchomić.

Obydwa z następujących zatrzymać zdarzenie propagacji, ale również nie zmienić stan pola wyboru:

event.preventDefault();
return false;

javascript jquery checkbox events

Utwórz 22/07/2009 o 10:55
źródło użytkownik roryf

W innych językach...

8 odpowiedzi

głosy

30

Użyj metody stopPropagation:

event.stopPropagation();

Odpowiedział 22/07/2009 o 11:06
źródło użytkownik Patrice Neff

głosy

5

Jak wspominają inni, spróbuj stopPropagation().

I znajduje się druga obsługi spróbować: event.cancelBubble = true;Jest to specyficzna obsługi IE, ale jest obsługiwana w co najmniej FF. Tak naprawdę nie wiem zbyt wiele o tym, jak nie używał go sam, ale może być warto spróbować, jeśli wszystko inne zawiedzie.

Odpowiedział 22/07/2009 o 11:12
źródło użytkownik peirix

głosy

25

Nie zapomnij IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

Odpowiedział 16/12/2012 o 10:50
źródło użytkownik Faraz Kelhini

głosy

4

Jest to doskonały przykład dla zrozumienia koncepcji zdarzeń stacjonarnego. Na podstawie powyższych odpowiedzi, ostateczny kod będzie wyglądał jak wspomniano poniżej. W przypadku, gdy użytkownik kliknie na propagację wyboru zdarzeń do nagłówka „” elementu rodzica zostanie zatrzymany użyciu event.stopPropagation();.

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });

Odpowiedział 27/07/2015 o 10:13
źródło użytkownik mehras

głosy

5

Przy użyciu jQuery nie trzeba wywołać funkcję zatrzymania oddzielić ..

Można po prostu return falsew obsłudze zdarzenia

Spowoduje to zatrzymanie zdarzenia i anulować pęcherzyków ..

Zobacz także:

event.preventDefault () w porównaniu zwraca fałsz

Od docs jQuery:

Te koparki, zatem może zapobiec obsługi delegowanego od wyzwalania poprzez wywołanie Event.stopPropagation () lub powrót fałszywe.

Odpowiedział 17/08/2015 o 10:36
źródło użytkownik DutchKevv

głosy

0

Kredyt dla @mehras kodu. I właśnie utworzony fragment aby wykazać, bo myślałem, że będzie mile widziane i chciałem pretekst do wypróbowania tej funkcji.

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });

div {
  text-align: center;
  padding: 2em;
  font-size:1.2em
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox"/>Checkbox won't bubble the event,
 but this text will.</div>
<div id="container">click() bubbled up!</div>

Odpowiedział 19/04/2017 o 20:39
źródło użytkownik user2503764

głosy

-1

W angularjs ten powinien prace:

event.preventDefault(); 
event.stopPropagation();

Odpowiedział 22/05/2017 o 09:08
źródło użytkownik Kugan Kumar

rahul · Accepted Answer · 2009-07-22 11:06

zastąpić

event.preventDefault();
return false;

z

event.stopPropagation();

Event.stopPropagation ()

Zatrzymuje barbotaż zdarzenie do elementów nadrzędnych, uniemożliwiając jakiekolwiek teleskopowe macierzyste od otrzymania powiadomienia o zdarzeniu.

event.preventDefault ()

Zapobiega przeglądarkę z wykonaniem domyślną akcję. Użyj metody isDefaultPrevented wiedzieć, czy ta metoda była kiedyś nazywana (tego obiektu zdarzenia).