javascript - วิธีปิดการใช้งานองค์ประกอบ DIV และทุกอย่างภายใน

ฉันจำเป็นต้องปิดการใช้งาน DIV และเนื้อหาทั้งหมดของมันโดยใช้ Javascript ฉันสามารถสาบานว่าการทำสิ่งง่าย ๆ

<div disabled="true"> 

มันเคยใช้ได้ผลสำหรับฉันก่อนหน้านี้ แต่ด้วยเหตุผลบางอย่างตอนนี้มันไม่ทำงานแล้ว ฉันไม่เข้าใจว่าทำไม

ใน IE10: ข้อความ "คลิกฉัน" ไม่เป็นสีเทาและตัวจัดการคลิกยังคงทำงานอยู่

จริงๆ แล้วฉันต้องการให้สิ่งนี้ทำงานได้บน IE10 ด้านล่างนี้คือโค้ดของฉัน

<html>
    <script>
         function disableTest(){

            document.getElementById("test").disabled = true;
            var nodes = document.getElementById("test").getElementsByTagName('*');
            for(var i = 0; i < nodes.length; i++){
                nodes[i].disabled = true;
            }

         }


     </script>

<body onload="disableTest();">
   <div id="test">
       <div onclick="alert('hello');">
           Click Me
       </div>
   </div>

</body>
</html>

คำตอบ #1

คำสั่ง CSS ต่อไปนี้จะปิดใช้งานเหตุการณ์การคลิก

pointer-events:none;

คำตอบ #2

ลองอันนี้ดู!

$("#test *").attr("disabled", "disabled").off('click');

ฉันไม่เห็นคุณใช้ jquery ข้างต้นเลย แต่คุณได้ระบุมันเป็นแท็ก

คำตอบ #3

จาวาสคริปต์และเจคิวรี

function sah() {
        $("#div2").attr("disabled", "disabled").off('click');
        var x1=$("#div2").hasClass("disabledDiv");
        
        (x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
  sah1(document.getElementById("div1"));

}

    function sah1(el) {
        try {
            el.disabled = el.disabled ? false : true;
        } catch (E) {}
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                sah1(el.childNodes[x]);
            }
        }
    }

#div2{
  padding:5px 10px;
  background-color:#777;
  width:150px;
  margin-bottom:20px;
}
.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
        <div id="div2" onclick="alert('Hello')">Click me</div>
        <input type="text" value="SAH Computer" />
        <br />
        <input type="button" value="SAH Computer" />
        <br />
        <input type="radio" name="sex" value="Male" />Male
        <Br />
        <input type="radio" name="sex" value="Female" />Female
        <Br />
    </div>
    <Br />
    <Br />
    <input type="button" value="Click" onclick="sah()" />

คำตอบ #4

ฉันคิดว่าสคริปต์แบบอินไลน์หยุดได้ยาก แทนที่จะทำแบบนั้นคุณสามารถลองใช้วิธีนี้:

<div id="test">
    <div>Click Me</div>
</div>

และสคริปต์:

$(function () {
    $('#test').children().click(function(){
      alert('hello');
    });
    $('#test').children().off('click');
});

ลองเช็ค FIDDLE ดูและดูว่ามันช่วยได้ไหม

อ่านเพิ่มเติมเกี่ยวกับ .off()