onay kutusu tıklandığında fokurdayan olayı nasıl engellenir

Question

onay kutusu tıklandığında fokurdayan olayı nasıl engellenir

oy

149

Ben ancak onay kutusu ben onay kutusu tıklandığında çalıştırmak istemiyoruz o kendi tıklama davranışı ile bir konteynerin içinde de, ben click olayı bazı Ajax eylemi gerçekleştirmek isteyen bir onay kutusu var. Bu örnek ben yapmak istediğim şey gösterir:

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

Ancak, kaçamam için (onay kutusu işaretli olma / kontrolsüz) varsayılan tıklama davranışını neden olmadan fokurdayan olayı durdurmak için anlamaya olamaz.

Aşağıdakilerden Hem onay kutusu durumunu değiştirmez da fokurdayan olayı durdurmak ama:

event.preventDefault();
return false;

javascript jquery checkbox events

Oluştur 22/07/2009 saat 10:55
kaynak kullanıcı roryf

Diğer dillerde...

8 cevaplar

oy

30

stopPropagation yöntemi kullanın:

event.stopPropagation();

Cevap 22/07/2009 saat 11:06
kaynak kullanıcı Patrice Neff

oy

5

Diğerleri de söylediğim gibi, deneyin stopPropagation().

Ve denemek için ikinci bir işleyici var: event.cancelBubble = true;Bu bir IE özgü işleyicisi, ama en azından FF desteklenir. Kendim kullanmadıysanız gibi gerçekten bu konuda fazla bilmiyorum, ama her şeyin başarısız olursa o denemeye değer olabilir.

Cevap 22/07/2009 saat 11:12
kaynak kullanıcı peirix

oy

25

IE unutma:

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

Cevap 16/12/2012 saat 10:50
kaynak kullanıcı Faraz Kelhini

oy

4

Bu olay fokurdayan konsepti anlamak için mükemmel bir örnektir. Yukarıdaki yanıtlara göre, son kod aşağıda belirtildiği gibi gibi görünecektir. Kullanıcı, ebeveyn elemanın 'başlığının' in yanındaki onay kutusunu olay yayılmasını Tıklanma Nerede kullanılarak durdurulacak 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;
               }
          });     
  });

Cevap 27/07/2015 saat 10:13
kaynak kullanıcı mehras

oy

5

jQuery kullanırken, bir durdurma işlevi ayırmak aramaya gerek yok ..

Sadece can return falseolay işleyicisi içinde

Bu olay durdurmak ve baloncuklanmasını iptal edecektir ..

Ayrıca bakınız:

vs event.preventDefault () return false

jQuery Dokümanlar:

Bu vasıtalar, bu nedenle, Event.stopPropagation çağrı () veya yanlış döndürerek tetiklemesini temsilci işleyici engelleyebilir.

Cevap 17/08/2015 saat 10:36
kaynak kullanıcı DutchKevv

oy

0

Kredi için @mehras kodu. Bunu takdir düşündüm ve ben bu özelliği denemek için bir bahane istedim çünkü sadece bunu göstermek için bir pasajı yarattı.

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

Cevap 19/04/2017 saat 20:39
kaynak kullanıcı user2503764

oy

-1

angularjs bu işleri yapmalıdır:

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

Cevap 22/05/2017 saat 09:08
kaynak kullanıcı Kugan Kumar

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

değiştirmek

event.preventDefault();
return false;

ile

event.stopPropagation();

Event.stopPropagation ()

olayın bildirilmesini herhangi bir üst işleyicileri önlenmesi, ana elemanlarına bir olayın kabarcık oluşumunu durdurur.

event.preventDefault ()

Varsayılan eylemi yürütülmesini tarayıcıyı önler. Bu yöntem şimdiye (yani olay nesne üzerinde) denirdi olmadığını bilmek isDefaultPrevented yöntemi kullanın.