在页面开发中，我们常常需要控制某些元素的点击行为，本文将从多个方面介绍禁止div的点击事件。
一、div禁止点击事件
我们可以使用CSS属性pointer-events来禁止div的点击事件。该属性有以下几种取值：
.none{
pointer-events:none;
}
1、none：元素不响应鼠标事件，包括禁用鼠标事件及对鼠标事件作出响应
2、auto：默认值，元素响应鼠标事件
3、visible：元素响应鼠标事件，但会忽略其他层叠元素
4、visiblePainted：元素仍响应鼠标事件，但会忽略其他层叠元素
5、painted：元素不响应鼠标事件，但会忽略其他层叠元素
6、fill：元素不响应鼠标事件，但绘制它的颜色不与其他层叠元素 “混合”。
7、stroke：元素不响应鼠标事件，但绘制它的颜色与其他层叠元素 “混合”。
我是一个禁止点击的div
二、div禁止点击可以滑动
如果div禁止了点击，但是div中还有可以滑动的元素，滑动依然是可以触发点击事件的。为了解决这个问题，我们可以使用CSS属性touch-action来控制移动端的触摸事件。
.div{
touch-action:none;
}
当touch-action被设置为none时，所有鼠标或触屏事件会禁止。如果在容器中存在能够自由滚动的元素，那么可以增加pan-x或pan-y的值，例如
.div{
touch-action:pan-y;
}
三、js禁止点击div
通过js代码设置元素的onclick属性为空，可以禁止div的点击事件。元素点击后，不会再响应任何事件，并且可以避免相关的冒泡事件。
四、vue div禁止点击
在vue中禁止div的点击事件，可以通过设置div的@click.prevent属性来实现：
我是一个禁止点击的div
五、div禁止滚动条
我们可以实现禁止div的滚动事件，在pc端可以使用以下代码：
$('.div').scroll(function () {
$(this).scrollLeft(0);
$(this).scrollTop(0);
});
而在移动端中，我们可以阻止默认的滚动事件：
element.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
六、div点击事件
为了增加div的交互性，我们可以为div添加点击事件。在html中，我们可以在div标签上添加onclick属性，例如：
而在JS中，我们可以通过addEventListener为div添加点击事件：
<script>
document.getElementById('div').addEventListener('click', function () {
alert(1);
});
</script>
七、div禁止换行
为了避免div出现不必要的换行影响页面布局，我们可以在CSS中使用white-space属性：
.div{
white-space:nowrap;
}
八、div置灰不可点击
当需要禁用div的点击事件，并且使div置灰不可点击时，我们可以使用以下方法来实现：
.div{
pointer-events:none;
background-color:#f5f5f5;
color:#999;
}
以上方式既保证了div不响应点击事件，又使div可以与其他元素有明显的区分。
九、div点击后变色选取
为了让用户在点击div时有更直观的交互体验，我们可以在CSS中为div添加:hover和:active状态：
.div:hover{
background-color:#f5f5f5;
color:#999;
}
.div:active{
background-color:#ccc;
color:#fff;
}
以上代码中hover状态表示鼠标移上去的效果，而active状态表示鼠标按下时的效果。
