关于禁止图片拖动的问题

标签：

最近在做一个公司的抢红包项目，会在页面上下红包雨，玩家点击红包来玩抢红包，但是当玩家在急促的点击中很容易触发图片的拖动，而在火狐浏览下浏览器下又有默认的图片拖动手势支持，火狐一拖动图片就会在新窗口打开图片，而IE而更BT，直接打开图片下载窗口，严重影响用户体验。

一开始想用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>

个人知识有限，如有更好的方法望不吝分享，共同学习，共同进步！

关于禁止图片拖动的问题

标签：

原文地址：http://www.cnblogs.com/xwwin/p/4772680.html