如何禁用div内的点击

Question

出于多种原因，我需要禁用在 div 元素内某些内容的点击操作，例如受到点击广告攻击的影响。但我仍希望它可见。

请考虑以下片段：

<div class="ads">
something should be here, i do not want to be clicked
</div>

如何禁用该

内的左键单击能力？

- Reham Fahmy

---

就此而言，广告通常被写入iframe中，以防止主机页面访问。 - Rob M.

请查看以下内容：https://dev59.com/gVXTa4cB1Zd3GeqPyRUE - rasso

Answer 1

可以使用的CSS属性是：

pointer-events:none

!IMPORTANT请注意，此属性不受 Opera Mini 和 IE 10（含）及以下浏览器的支持。需要其他解决方案。

使用 jQuery 方法如果您想通过脚本而非 CSS 属性禁用它，则可以使用以下方法：如果您正在使用 jQuery 版本 1.4.3+：

$('selector').click(false);

如果不是：

$('selector').click(function(){return false;});

• 参考自： jquery - disable click

---

你可以使用 pointer-events: auto;（文档）来重新启用点击功能。

请注意，pointer-events 属性会覆盖 cursor 属性，所以如果你想要的光标不是标准的 ，你的 CSS 样式应该放在 pointer-events 后面。

- Aviad

---

哦，你是我的救命恩人！我花了很多时间试图找出如何防止用户点击一个项目。后来，“光标事件”这个词出现在我的脑海中，我得到了你的答案。很酷，不是吗？ - Travis Le

现在它已经被移动版Opera支持：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events - macabeus

我有一个悬浮在另一个组件上的元素，它们之间没有父子关系，而且我不希望用户点击上面的那个元素。你的 CSS 方法非常好用。 - Lê Quang Bảo

Answer 2

如果你想使用纯CSS：

pointer-events:none;

- Abe Hendlish

---

什么！这太棒了..测试过并且完美运行，以前从未知道那个CSS属性..非常感谢。 - Reham Fahmy

请看下面的回答，因为这不是一个稳健的解决方案。 - Aviad

对我来说，这不是一个好的解决方案。这不仅禁用了点击事件，还禁用了滚动和其他功能... - Kamil Naja

以简单而精确的方式完成这些任务。非常感谢 :) - Imran Rafiq Rather

工作得很好，但说真的，这与“样式”有什么关系？！ 这不应该是CSS属性。 - balanceglove2

Answer 3

试试这个：

pointer-events:none

在指定的HTML元素上添加上述代码将防止所有的点击、状态和光标选项。

http://jsfiddle.net/4hrpsrnp/

<div class="ads">
 <button id='noclick' onclick='clicked()'>Try</button>
</div>

- Rakesh_Kumar

Answer 4

如果使用onclick DIV函数并希望再次禁用点击，可以使用以下代码：

for (var i=0;i<document.getElementsByClassName('ads').length;i++){
    document.getElementsByClassName('ads')[i].onclick = false;
}

示例：
HTML

<div id='mybutton'>Click Me</div>

Javascript

document.getElementById('mybutton').onclick = function () {
    alert('You clicked');
    this.onclick = false;
}

- LY MOT

Answer 5

您可以使用CSS

.ads{pointer-events:none}

或者使用JavaScript阻止事件

$("selector").click(function(event){
   event.preventDefault();
});

- MOT EL

Answer 6

如何禁用点击另一个div，直到第一个弹出的div关闭。

 <p class="btn1">One</p>
 <div id="box1" class="popup">
 Test Popup Box One
 <span class="close">X</span>
 </div>

 <!-- Two -->
 <p class="btn2">Two</p>
 <div id="box2" class="popup">
 Test Popup Box Two
 <span class="close">X</span>
  </div>

<style>
.disabledbutton {
 pointer-events: none;
 }

.close {
cursor: pointer;
}

</style>
<script>
$(document).ready(function(){
//One
$(".btn1").click(function(){
  $("#box1").css('display','block');
  $(".btn2,.btn3").addClass("disabledbutton");

});
$(".close").click(function(){
  $("#box1").css('display','none');
  $(".btn2,.btn3").removeClass("disabledbutton");
});
</script>

- Ashar Zafar