CSS禁止鼠标点击事件例子

 更新时间:2016年10月2日 16:18  点击:1462
下面我们来看一篇关于CSS禁止鼠标点击事件例子,希望下面的文章对各位有帮助。

JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。

event.preventDefault()
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

这种方法可以阻止当前元素的浏览器默认行为,但并不阻止事件被父级及document响应。如果想彻底取消事件,则可使用stopPropagation

event.stopPropagation()
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

这两种是在JS中的常用取消事件的方法,但是其实还有一种用纯css就能实现取消事件响应的方法,pointer-events,使用起来更加简单,它可以:

1 阻止用户的点击动作产生任何效果

2 阻止缺省鼠标指针的显示

3 阻止CSS里的hover和active状态的变化触发事件

4 阻止JavaScript点击动作触发的事件

比如以下CSS就顺起到将禁用的按钮灰掉的效果

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}
这种方法明显比js代码更加灵活,可惜ie9不支持

[!--infotagslink--]

相关文章

  • Linux下PHP安装curl扩展支持https例子

    安装curl扩展支持https是非常的重要现在许多的网站都使用了https了,下面我们来看一篇关于PHP安装curl扩展支持https例子吧。 问题: 线上运行的lamp服务器,默认yu...2016-11-25
  • easyUI下拉列表点击事件使用方法

    这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
  • php使用floor去掉小数点的例子

    floor会产生小数了如果我们不希望有小数我们是可以去除小数点的了,下面一聚教程小编来为各位介绍php使用floor去掉小数点的例子,希望对各位有帮助。 float floor (...2016-11-25
  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果。分享给大家供大家参考,具体如下:这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动、scroll 8个方向、鼠标坐标获娶对象上下左右位置获取,大家可以自己添...2015-10-21
  • 纯Css实现下拉菜单的简单例子

    下面我们来看一篇关于纯Css实现下拉菜单的简单例子,希望这篇文章能够给各位同学带来帮助,具体步骤如下. 大家可能会经常用到hover这属性,用hover实现鼠标经过的颜...2017-01-22
  • php时间日期对比与日期加减例子

    在php中日期对比用得比较多了,还有一个日期加减也用到不少,下面我拿两个例子来给大家介绍在php中日期操作方法吧,希望文章能给你带来帮助 功能需求 文章发布时段操...2016-11-25
  • php更新修改excel中的内容例子

    本例子不是读取Excel或生成新的Excel,而是读取现有的Excel文件,然后修改Excel中的数据,就像修改mysql中数据一样的哦。 代码如下 ...2016-11-25
  • php正则获取文章内容中图片地址例子

    正则提取图片中的地址我们介绍过很多的相关文章了,下面再来给各位介绍一个可以提取内容中第一张图片的例子,希望对各位有帮助。 代码如下 复制代码 ...2016-11-25
  • php获取QQ头像并显示的例子

    最近看到博客留言的头像有点别扭,因为游客的头像都是同一个头像,看着不是很舒服。虽然现在绝大多数的主题集成了Gavatar头像功能,先不说gavatar被墙的问题,我自己现在都没...2016-11-25
  • php判断字符串是否包含另一个字符串例子

    php判断字符串是否包含另一个字符串的实现方法有许多的办法,像我们在网上一搜索可看到大量关于字符是否包含指定字符的方法,下面我把这些实用的例子整理一起与大家分享...2016-11-25
  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    这篇文章主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-10
  • PHP date函数获取时间几个例子

    date函数是php中一个非常好用的日期获取函数了,我们可以使用它来获取指定日期或者当前日期了,下面我来简单的介绍一下date函数用法与常用用法吧。 PHP星期几获取代...2016-11-25
  • flutter实现点击事件

    这篇文章主要介绍了flutter实现点击事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-26
  • php 设置cookie路径例子总结

    对于cookie path很多的朋友不以为燃了这样会发现就是因为一个小点或一个路径问题测试了一天发现读取不了cookie值了,今天我就来给大家介绍cookie中路径的一些例子与注...2016-11-25
  • php文件锁类防止并发的例子

    文件锁可以防止文件读写时多人访问时出现共享问题或数据不准确的问题,下面我们来看一篇关于php文件锁类防止并发的例子,具体如下. 工作间隙写了个文件锁的类,用于...2016-11-25
  • CSS实现鼠标滑过鼠标点击的教程

    这篇文章介绍了css中如何实现鼠标滑过点击的代码,是个很实用的功能,大家可以动手尝试一下 鼠标滑过元素,使得元素的样式发生改变 我们定义一个按钮标签 代码如下: <...2017-01-22
  • php输出404状态码的例子

    404状态代码在php中可以使用header输出但不能使用echo或print输出哦,许多的朋友把这个给搞混了,下面我们来看一篇关于php输出404状态码的例子 例子 代码如...2016-11-25
  • 视频网站的制作例子二

    Listing 4. simplemovie.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VBox...2016-11-25
  • php 数组转xml的例子

    数组转xml用到不多用数组转json比较多了,但今天有一个功能就是必须要把数组转换成xml了,下面小编人网上找到了一段关于php 数组转xml的代码测试了都可以使用,下面整理分...2016-11-25
  • php获取mysql字段名称和其它信息的例子

    在php中我们要查看mysql数据库的信息我们可以直接连接mysql之后再调用mysql相关语句就可以实现了,下面给各位整理了一篇文章希望对大有帮助。 首先我们需要了解下...2016-11-25