Jak zastavit akci bublající na checkbox kliknutí

Question

Jak zastavit akci bublající na checkbox kliknutí

hlasů

149

Mám políčko, že chci provést nějakou akci Ajax na událost click, ale políčko je i uvnitř nádoby s jeho vlastní chování při kliknutí, které nechci běžet, když je políčko klepnutí. Tento příklad ilustruje to, co chci dělat:

<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>

Nicméně, nemohu přijít na to, jak zastavit akce bublající aniž by docházelo k výchozí chování kliknutí (checkbox stávat kontrolována / Nekontrolovaná) se nespustí.

Oba následující zastavit akci bublající ale také nemění stav políčka:

event.preventDefault();
return false;

javascript jquery checkbox events

Položena 22/07/2009 v 10:55
zdroj uživatelem roryf

V jiných jazycích...

8 odpovědí

hlasů

30

Použijte metodu stopPropagation:

event.stopPropagation();

Odpovězeno 22/07/2009 v 11:06
zdroj uživatelem Patrice Neff

hlasů

5

Jak již bylo zmíněno jiní, zkuste stopPropagation().

A je tu druhý handler vyzkoušet: event.cancelBubble = true;Je to specifický handler IE, ale je podporován alespoň FF. Opravdu nevím, moc o tom, jak jsem nepoužil sám, ale to by stálo za pokus, když vše ostatní selže.

Odpovězeno 22/07/2009 v 11:12
zdroj uživatelem peirix

hlasů

25

Nezapomeňte IE:

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

Odpovězeno 16/12/2012 v 10:50
zdroj uživatelem Faraz Kelhini

hlasů

4

Jedná se o vynikající příklad pro pochopení události, jejichž bublající koncept. Na základě výše uvedených odpovědí na bázi bude konečný kód vypadat, jak je uvedeno níže. V případě, že uživatel klikne na políčko šíření události ‚hlavičky‘ nadřazeného elementu bude přestali používat 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;
               }
          });     
  });

Odpovězeno 27/07/2015 v 10:13
zdroj uživatelem mehras

hlasů

5

Pokud používáte jQuery nemusíte volat funkce zastavení oddělit ..

Stačí si jen return falsev obsluze události

To zastaví akci a zrušit bublání ..

Viz také:

event.preventDefault () vs. return false

Z dokumentů jQuery:

Tyto manipulátory, tudíž mohou bránit psovoda tak pověřeného od spuštění voláním Event.stopPropagation () nebo návratu false.

Odpovězeno 17/08/2015 v 10:36
zdroj uživatelem DutchKevv

hlasů

0

Kredit @mehras pro kód. Právě jsem vytvořil úryvek to prokázat, protože jsem si myslel, že by ocenili a chtěl jsem záminku, aby se pokusila tuto funkci.

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

Odpovězeno 19/04/2017 v 20:39
zdroj uživatelem user2503764

hlasů

-1

V angularjs mělo by to funguje:

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

Odpovězeno 22/05/2017 v 09:08
zdroj uživatelem Kugan Kumar

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

hlasů

272

Autor této otázky tuto odpověď přijal za nejlepší.

nahradit

event.preventDefault();
return false;

s

event.stopPropagation();

Event.stopPropagation ()

Zastaví probublávání události mateřským prvky brání jakékoli mateřské rutiny před o události.

event.preventDefault ()

Zabraňuje prohlížeč od provádění výchozí akci. Použijte metodu isDefaultPrevented vědět, zda tato metoda byla někdy nazýván (v tomto objektu události).

Odpovězeno 22/07/2009 v 11:06
zdroj uživatelem rahul