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

Posted 2023-05-08

【中文标题】HTML JS - 通过 CSS 类禁用点击可能性

【英文标题】：HTML JS - Disable clicking possibility through the CSS class

【发布时间】：2021-03-10 12:19:57

【问题描述】：

绅士你好

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

2° 我不能在 html 元素中使用 ID，因为我无法在代码中插入任何 ID，所以我需要使用 Class 来实现魔法。

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

【问题讨论】：

要禁用仅使用 CSS 的点击，请尝试 pointer-events: none;

inner.all.disabled.reserved - 这是类，但您指定为 id

查看浏览器开发工具控制台上出现的任何错误消息。

@ozgur，感谢您的帮助.....但是我必须禁用单击行为并保持悬停行为。鼠标悬停在元素上时，工具提示必须继续工作。有了这个指针事件属性，所有的悬停事件都将被禁用。

@PaulodoPorto 对不起，我没有注意到悬停的必要性

【参考方案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>

【参考方案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>

【讨论】：

我测试了上面的代码，正如你所说，可以单击一次元素。之后，元素不再可点击，工具提示完全消失。我连一次都不能点击元素明白吗？该元素必须是不可点击的，但保留悬停效果。非常感谢！！

@PaulodoPorto，我更新了答案。现在悬停工作正常，但点击事件不起作用。请检查。

...我故意放console.log('This message will not show!') 以确保该元素不可点击。

我可以这么说，魔法还没有发生。现在当我点击元素时我有绿色字体，但元素仍然是 可点击 : )

我特地为你创建了一个带有悬停的规则，这样你就可以看到悬停的活动。这是一个测试悬停。但是元素不能点击，因为我禁用了点击。查看我的jquery 代码。如果元素是可点击的，您将收到一条控制台消息 - console.log('This message will not show!')。