Question

我正在尝试在一个名为Contentarea的div中创建单选按钮和标签。我现在遇到的问题是单选按钮和标签都是可点击的，任何人都可以告诉我如何在以下代码中禁用标签的点击事件。

<div id="ContentArea" class="contentarea">  </div>

$("#ContentArea").click(function(evt) {
    $("#ContentArea").empty();
    $("#lblarea").empty();
    $("#btngroup").empty();
    var clicked = evt.target;
    var currentID = clicked.id || "No ID!";
    var type = clicked.value;
    if (type == "button") {
        loadlabelpagebyID(currentID);
    } else if (type == "raidobutton") {
        loadlabelpagebyID(currentID);
    };
});

function loadradiobuttonpagebyID(pageid) {
    $.get("HeadachePROData.xml", function(xml) {
        $(xml).find('Pages').each(function() {
            $(xml).find('Page[id="' + pageid + '"]').each(function(i) {
                pagetype = $(this).attr("type");
                nextpageid = $(this).attr("nextpage");
                backpageid = $(this).attr("backpage");
                sessionStorage.setItem("nextpageid", nextpageid);
                sessionStorage.setItem("backpageid", backpageid);
                $(this).find('nav').each(function(i) {
                    var btntext = $(this).text();
                    navpageid = $(this).attr("navpage");
                    navtype = $(this).attr("type");
                    var testbtn = $('<input type="radio">', {
                        value: navtype,
                        id: navpageid
                    });
                    var $radiolabel = $("<label>").text(btntext);
                    $radiolabel.removeAttr('onclick').off('click');
                    $("#ContentArea").append(testbtn);
                    $("#ContentArea").append($radiolabel);
                    $("#ContentArea").append("<br/><br/>");
                });
            });
        });
    });
}

Answer 1

这是完全不可取的，但您可以将单击事件附加到标签，检查标签本身是否被单击，并在这种情况下防止默认。见下文：

$('.cancel-click').on('click', function(e){
  if(e.target.nodeName === 'LABEL') e.preventDefault();
});

/* just demo styles */
label {
  float:left;
  clear:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox"> Clickable Label</label>
<label class="cancel-click"><input type="checkbox"> Non-Clickable Label</label>

Answer 2

这也可以通过css实现，但请注意，浏览器支持在IE中受限：

label {
    pointer-events:none;
}

浏览器支持 https://caniuse.com/#feat=pointer-events

禁用标签点击事件

2 个答案: