Простой щелчок на ярлыках делает двойной щелчок

Question

У меня есть метка и некоторые функции, выполняемые при нажатии на нее.

Но когда событие щелчка сделано, двойное событие щелчка не будет сделано, то мои функции запустить 2 раза ...

Вы можете увидеть свет пример here

HTML:

<label> 
<input type="checkbox" id="checkbox"> Click here 
</label> 
<input type="text" id="test" value="0"/> clicks​​​ 

JavaScript:

$(document).ready(function(){ 
    $('label').click(function(event) { 
     $('#test').val(parseInt($('#test').val())+1); 
     event.preventdefault(); 
    }); 
});​ 

• Когда мы нажимаем на флажок, счетчик кликов +1 >> Ok
• Когда мы нажимаем на ярлыке, счетчик кликов +2 >> Нок

Как решить эту проблему?

Редактировать

preventdefault() к preventDefault() фиксированной двойной щелчок, но теперь флажок не установлен больше ...

Answer 1

Ну это интересно. Вы видите два события click, один из них из флажка input, а другой (конечно) из label. И это имеет смысл: нажатие на label походит на щелчок по метке label этикетки, по дизайну. Here's an updated fiddle показывает, что происходит.

Так просто подключить click на флажке и не зацепить его на этикетке:

$(document).ready(function(){ 
    $('#checkbox').click(function(event) { 
     $('#test').val(parseInt($('#test').val())+1); 
    }); 
});​ 

Updated fiddle

---

И как Ракетно сказал в комментарии на вопрос по: preventDefault имеет капитал D в нем, поэтому ваш код бросает исключение. Но вы все равно не хотели preventDefault, потому что вы хотите, чтобы этот флажок был установлен.

Answer 2

Uncaught TypeError: Объект # не имеет метод 'preventdefault'

d в preventdefault должны быть капитализированы.

Редактировать: поведение браузера для флажка, помещенного в метку, запускается при щелчке по галочке при нажатии метки. Чтобы решить исходную проблему, привяжите только добавочный обработчик кликов к флажку.

$(document).ready(function(){ 
    $('#checkbox').click(function(event) { 
     $('#test').val(parseInt($('#test').val())+1); 
    }); 
});​ 

http://jsfiddle.net/vgWGT/28/

Похожие: http://www.webmonkey.com/2010/02/javascript_debugging_for_beginners/

Answer 3

Делают это так:

<div class="click"> 
<input type="checkbox" id="checkbox"> 
<label>Click here</label> 
</div> 

<input type="text" id="test" value="0"/> clicks​ 


$(document).ready(function(){ 
    $('.click').click(function(event) { 
     $('#test').val(parseInt($('#test').val())+1); 
     event.preventdefault(); 
    }); 
}); 

Answer 4

Простое решение заключается в игнорировании одного звонка .. Смотри ниже,

$(document).ready(function(){ 
    $('label').click(function(event) { 
     if (event.target.nodeName == 'LABEL') return; 
     $('#test').val(parseInt($('#test').val())+1);   
    }); 
}); 

DEMO

Answer 5

preventDefault() отключит оригинальная функция. Попробуйте это:

$(document).ready(function(){ 
    $('input:#checkbox').click(function() { 
     $('#test').val(parseInt($('#test').val())+1); 
    }); 
}); 

Answer 6

HTML

<input type="checkbox" id="checkbox"> 
<label for ="checkbox">Click here</label> 
<input type="text" id="test" value="0"/> clicks 

JS

$(document).ready(function(){ 
    $('label').click(function(event) { 
    var valor = parseInt($('#test').val()); 
     $('#test').val(valor+1); 
     event.preventdefault(); 
    }); 
}); 

Он работает