Hogyan lehet megállítani esemény fortyogó a négyzetet kattintással

Question

Hogyan lehet megállítani esemény fortyogó a négyzetet kattintással

szavazat

149

Van egy négyzetet, hogy szeretnék végre valami Ajax akció a click esemény azonban a négyzetet is a tároló belsejében vele saját kattintással viselkedését, hogy nem akarja futtatni, ha a négyzetet kattint. Ezt a mintát illusztrálja, hogy mit akarok csinálni:

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

Azonban nem tudok rájönni, hogyan kell megállítani az esemény bugyborékoló anélkül alapértelmezett kattintással viselkedés (jelölőnégyzet válik ellenőrzött / bejelölve), hogy nem fut.

Az alábbi két megálló esetén fortyogó de nem változik a négyzetet állam:

event.preventDefault();
return false;

javascript jquery checkbox events

A kérdést 22/07/2009 10:55
a forrás felhasználó roryf

Más nyelveken...

8 válasz

szavazat

30

A következő szerinti stopPropagation módszer:

event.stopPropagation();

Válaszolt 22/07/2009 11:06
a forrás felhasználó Patrice Neff

szavazat

5

Ahogy mások is említettük, próbálja stopPropagation().

És van egy másik felvezető kipróbálni: event.cancelBubble = true;Ez egy IE specifikus kezelőt, de támogatja azt legalább FF. Nem igazán tudom, sokat róla, mert én még nem használtam magam, de lehet, hogy érdemes egy lövés, ha minden kötél szakad.

Válaszolt 22/07/2009 11:12
a forrás felhasználó peirix

szavazat

25

Ne felejtsük el, IE:

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

Válaszolt 16/12/2012 10:50
a forrás felhasználó Faraz Kelhini

szavazat

4

Ez egy kiváló példája annak megértéséhez esemény bugyborékoló fogalom. A fentiek alapján a válaszokat, az utolsó kódot fog kinézni, mint alább. Ha a felhasználó rákattint a négyzetet az esemény terjedési anyavállalata elem „header” leáll használatával 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;
               }
          });     
  });

Válaszolt 27/07/2015 10:13
a forrás felhasználó mehras

szavazat

5

Amikor a jQuery akkor nem kell hívni a stop funkció külön ..

Ha csak return falseaz eseménykezelő

Ez leállítja az esemény, és megszünteti fortyogó ..

Lásd még:

event.preventDefault () vs. return false

A jQuery docs:

Ezek rakodók, ezért előfordulhat, hogy a kijelölt kezelőt a kiváltó hívja event.stopPropagation () vagy visszatérő hamis.

Válaszolt 17/08/2015 10:36
a forrás felhasználó DutchKevv

szavazat

0

Hitel @mehras a kódot. Létrehoztam egy részletét bemutatni, mert azt gondoltam, hogy szívesen vennénk, és szerettem volna egy ürügy, hogy megpróbálja ezt a funkciót.

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

Válaszolt 19/04/2017 20:39
a forrás felhasználó user2503764

szavazat

-1

A angularjs ez működik:

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

Válaszolt 22/05/2017 09:08
a forrás felhasználó Kugan Kumar

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

cserélje

event.preventDefault();
return false;

val vel

event.stopPropagation();

event.stopPropagation ()

Leállítja a buborékképződés egy esemény a szülő elemek, megakadályozva bármilyen szülő rakodók értesítést az esemény.

event.preventDefault ()

Megakadályozza a böngésző végrehajtó az alapértelmezett művelet. A következő módszer isDefaultPrevented tudni, hogy ezt a módszert soha nem nevezett (az eseményre objektum).