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

Question

，先生您好

1° 请问如何通过css class禁用点击行为onclick？

2° 我不能在 HTML 元素中使用 ID，因为我无法在代码中插入任何 ID，所以我需要使用Class 让奇迹发生。

3° 在我所有的尝试中，none 仍然有效。

元素和 CSS Class 如果单击我需要禁用：

<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>

Class: label.inner.all.disabled.reserved.my_numbers

1° 首次尝试：

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

我特地注册了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>

Answer 2

我发现最好使用事件。您可以使用 .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>

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

HTML JS - Disable clicking possibility through the CSS class

html

javascript

css

jquery

jquery-ui