Question

我在div中收到了一台收音机。获得在单击div时更改无线电状态的功能。问题是，当我点击无线电本身时，动作被调用两次（原生无线电点击和div点击），因此它不会改变状态。我该如何预防呢？尝试stopPropagation()，preventDefault()，return false，但没有。

$('div').click(function(e){
    var elem = $('input[type=radio]',this);
    if(elem.prop( "checked" )){
        elem.prop('checked', false);
    }else{
        elem.prop('checked', true);
    }

    if(e.target != this){  
        e.preventDefault();
        e.stopPropagation();
        return false;    
    }
});

Fiddle here.

**我已经编辑了一个更适合案例的问题，对所有人都抱歉，但这些答案不是我需要的** **

Answer 1

最简单的解决方案是检查目标是否是INPUT元素（因为如果目标是INPUT元素，那么div中只有一个复选框，那么它就是复选框），如果是，则不执行任何操作。

$('div').click(function (e) {
    if (e.target.tagName == 'INPUT') {
        return;
    }
    var elem = $('input[type=checkbox]', this);
    if (elem.prop("checked")) {
        elem.prop('checked', false);
    } else {
        elem.prop('checked', true);
    }
});

演示：Fiddle

Answer 2

尝试使用event.stopImmediatePropagation（）。这会阻止其他事件发生。

Answer 3

您可以input使用e.stopPropagation()：

$('div').click(function(e){
    var elem = $('input[type=checkbox]',this);
    if(elem.prop( "checked" )){
        elem.prop('checked', false);
    }else{
        elem.prop('checked', true);
    }
});

$('input').click(function(e) {
    e.stopPropagation();
});

<强> Updated Fiddle

编辑：希望这是您的要求：

$('div').click(function (e) {
    var elem = $('input[type=radio]', this);
    if (elem.prop("checked")) {
        elem.prop('checked', false);
    } else {
        elem.prop('checked', true);
    }
});

var radioStatus = false;
$.each($('input[type=radio]'), function () {
    // Set initial state of radio
    this.radioStatus = $(this).attr("checked") || false;
    $(this).data("status", this.radioStatus);
    // Set mouse-over event callback
    $(this).mouseover(function () {
        this.radioStatus = $(this).attr("checked") || false;
        $(this).data("status", this.radioStatus);
    });
    // Set on-click event callback
    $(this).click(function () {
        this.radioStatus = !$(this).data("status")
        $(this).attr("checked", this.radioStatus);
        $(this).data("status", this.radioStatus);
    });
});

<强> Fiddle Demo

如何防止对儿童元素的点击动作？

3 个答案: