关于禁止图片拖动的问题
2015-08-31 11:35
183 查看
最近在做一个公司的抢红包项目,会在页面上下红包雨,玩家点击红包来玩抢红包,但是当玩家在急促的点击中很容易触发图片的拖动,而在火狐浏览下浏览器下又有默认的图片拖动手势支持,火狐一拖动图片就会在新窗口打开图片,而IE而更BT,直接打开图片下载窗口,严重影响用户体验。
一开始想用css来解决,给图片加上img{ pointer-events: none;} ,在火狐下可以解决,但是在IE下不起作用,后来几翻折腾,还是用JS来解决,给图片或者其父级都加上ondragstart="return false;"
但同时又遇到一个问题,在点击图片不小心拖动的时候,会选中下面的图片跟文字,总感觉怪怪的,百度几翻后发现给BODY加上onselectstart="return false;" onselectstart="on" style="-moz-user-select:none;"可以解决这样的问题,unselectable为IE准备,onselectstart为Chrome、Safari准备,-moz-user-select是FF的。但是考虑到这个红包雨效果是现官网的每个页面都是需要增加的,通过PHP引入的,同时给BODY加感觉也会影响整站的选择功能,太危险,于是考虑到给我的整个红包模块外包一层DIV,再给DIV绑定以上属性,至此解决。
个人知识有限,如有更好的方法望不吝分享,共同学习,共同进步!
一开始想用css来解决,给图片加上img{ pointer-events: none;} ,在火狐下可以解决,但是在IE下不起作用,后来几翻折腾,还是用JS来解决,给图片或者其父级都加上ondragstart="return false;"
<a class='redbagclass' ondragstart='return false;' href='javascript:void(0);'><img src='' /></a>
但同时又遇到一个问题,在点击图片不小心拖动的时候,会选中下面的图片跟文字,总感觉怪怪的,百度几翻后发现给BODY加上onselectstart="return false;" onselectstart="on" style="-moz-user-select:none;"可以解决这样的问题,unselectable为IE准备,onselectstart为Chrome、Safari准备,-moz-user-select是FF的。但是考虑到这个红包雨效果是现官网的每个页面都是需要增加的,通过PHP引入的,同时给BODY加感觉也会影响整站的选择功能,太危险,于是考虑到给我的整个红包模块外包一层DIV,再给DIV绑定以上属性,至此解决。
<div class="redbgcon"> <div class="lockbgclass" id="lockbg" onselectstart="return false;" onselectstart="on" style="-moz-user-select:none;"> </div> <div class="people" id="peopleid" style="display:none"> <img src="redbag/walk0.png" ondragstart="return false;"> </div> <div class="timeleft" id="counttimeid" style="display:none">3</div> </div>
个人知识有限,如有更好的方法望不吝分享,共同学习,共同进步!
相关文章推荐
- 用ajax提交数据到后台以便下载,但是不能下载
- txt文件转换成pdf格式的方法
- leetcode 125 Valid Palindrome(难易度:Easy)
- 转身,遇到秋
- Android开发性能优化之SparseArray和HashMap
- If There Is Only One Solution, Get a Second Opinion
- ios category
- Linux(Centos6.5)下安装svn服务器,并通过http访问
- 机器学习中利用牛顿迭代法代替梯度下降
- JavaSE复习日记 : 继承关系和super关键字以及继承关系中方法的覆写
- MyBatis使用(二)分页查询
- Python操作数据库
- Android App监听软键盘按键的三种方式
- Spark学习资源(不断更新)
- linux之Segment Fault错误分析[2]
- Your System Is Legacy; Design for It
- SQLServer优化资料整理(二)
- vbox里面的Ubuntu虚拟机与主机win7之间设置共享文件夹
- 一般处理程序+html 的CRUD
- PHP 加密的几种方式