HTML JS - 通过 CSS 类禁用点击可能性

Question

你好先生请1°如何通过 css 类禁用 onclick 的点击行为？2°我无法在 HTML 元素中使用 ID，因为我无法在代码中插入任何 ID，所以我需要使用类来实现奇迹。3°在我所有的尝试中，没有一个仍然有效。如果单击我需要禁用的元素和 CSS 类：<label class="inner all disabled reserved my_numbers"> <span class="p5_effect_tooltip_b top">     <span class="numero">999999<br><small>pending<br>payment</small></span>     <span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span> </span></label>班级： label.inner.all.disabled.reserved.my_numbers1° 第一次尝试：jQuery(document).ready(function() {    $("#inner.all.disabled.reserved").click(function() {        return false;    });});2° 第二次尝试：$(document).ready(function() {    $(".label.inner.all.disabled.reserved").click(function() {        $("label").off("click");    });});3° 第三次尝试：$(document).ready(function() {    $("#inner.all.disabled.reserved").click(function() {        return false;    });});4°尝试：$('#inner.all.disabled.reserved.my_numbers').disabled = true

Answer 1

我发现最好使用事件。您可以用来.preventDefault()停止事件操作。

例子：

$(function() {

  function preventClick(e) {

    e.preventDefault();

    console.log(e.target.nodeName + " Click Prevented");

    return false;

  }

  $("label.inner.all.disabled.reserved").click(preventClick).children().click(preventClick);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="inner all disabled reserved my_numbers">

 <span class="p5_effect_tooltip_b top">

     <span class="numero">999999<br><small>pending<br>payment</small></span>

     <span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>

 </span>

</label>

Answer 2

我特地注册了，console.log()这样你就可以看到点击只能进行一次。

有必要吗？

$(".inner.all.disabled.reserved").click(function(){

  console.log('This message will not show!');

}).off('click');

.inner.all.disabled.reserved:hover {

  color: green;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="inner all disabled reserved my_numbers">

 <span class="p5_effect_tooltip_b top">

     <span class="numero">999999<br><small>pending<br>payment</small></span>

     <span class="p5_custom_tooltip_b">Pre-Reserved: Jim</span>

 </span>

</label>