背景说明

前几天写页面时给自己留下了一个问题,在文本框/下拉列表等输入框最右边漂浮的一个箭头(实际上是一个带图标的span)会拦截鼠标事件,在点击箭头时文本框/下拉列表等不会获取到点击事件。

20160601152706

之前在网上查过这个问题的解决方案,比如

解决方案

搁置了两天之后,再回来解决这个问题,思路比较明确,就是要让span对事件透明,然后终于找到了基本上所有最新浏览器都支持的方案,只要在span上使用一个简单的CSS样式:

pointer-events:none

参考链接

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

http://www.cnblogs.com/meteoric_cry/archive/2011/07/03/2096971.html

发表评论

邮箱地址不会被公开。 必填项已用*标注