关于禁止图片拖动的问题

最近在做一个公司的抢红包项目,会在页面上下红包雨,玩家点击红包来玩抢红包,但是当玩家在急促的点击中很容易触发图片的拖动,而在火狐浏览下浏览器下又有默认的图片拖动手势支持,火狐一拖动图片就会在新窗口打开图片,而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>

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

时间: 2024-10-13 18:29:16

关于禁止图片拖动的问题的相关文章

html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

众所周知,一般的屏蔽的方法是用JS来编写的脚本,但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制. 禁止右键 oncontextmenu="return false" 禁止复制和剪切: oncopy="return false;" oncut="return false;" 禁止复制 onselectstart="return false" 禁止图片拖动 ondragstart="return false&q

禁止浏览器事件 (图片拖动)

禁止右键 oncontextmenu="return false" 禁止复制和剪切: oncopy="return false;" oncut="return false;" 禁止复制 onselectstart="return false" 禁止图片拖动 ondragstart="return false" 实例: <body oncontextmenu="return false&quo

图片拖动组件

图片拖动组件 DEMO <html> <HEAD> <title>鼠标拖动图片</title> <style type="text/css"> .dragme{position:absolute; cursor:move;width:110px;height:110px;border:#ececec 2px solid;} .imgcss{width:110px;height:110px;} .close{position:a

javascript 实现图片拖动

javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标 注意事项 要给图片的位置属性设为fixed或者absolute,并且要图片复制初始的left和top属性 代码如下 <!DOCTYPE html> <html> <head> <meta content="text/html;c

js实现图片拖动改变顺序

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. <!DOCTYPE html> <html> <head> <style> .img-div img { width:200px; height:200px; f

javascript完美实现图片拖动改变顺序

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间. html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">&l

禁止鼠标拖动图片在新窗口打开

<script language="javascript">  function imgdragstart(){return false;}  </script> <script language="javascript">  for(i in document.images)document.images[i].ondragstart=imgdragstart;  </script> 或直接在body写就行了<

禁止img图片拖动在新窗口打开

JS function imgdragstart(){return false;} for(i in document.images)document.images[i].ondragstart=imgdragstart; CSS(webkit兼容) draggable="false"

android 拖拽图片&amp;拖动浮动按钮到处跑

来自老外: import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.os.Bundle; import android.view.MotionEvent ; import android.widget.AbsoluteLayout; import android.widget.Button; public class Drag_And_D