可能会有人觉得我废话特别多，我就在开头写一个简单粗暴的版本：

在Firefox中ondrop事件会触发Firefox自带的拖拽搜索功能，在ondrop事件触发执行时触发的函数中加上这两条：

 /* 禁止冒泡行为 */

 event.stopPropagation();

 /* 禁止默认行为 */

 event.preventDefault();

这个时候Firefox拖拽的时候就不会弹出搜索页面了。

下面是废话特多的我的解决过程

在学习拖放事件的时候，我看的教程是用下面的一个例子去介绍这些事件的：

有两个<div>区域，其中一个<div>区域中有一个<p>元素，我们可以拖动<p>元素放到另一个<div>区域中，并且在控制台中会在刚开始拖动元素和元素拖动到指定区域的时候在控制台打印一句话。

效果像下面这样：

上面这张图是在Chrome中运行的效果，看起来是没啥问题是吧，但是在Firefox中却出了点问题：

没错在Firefox中，它会使用百度搜索我拖拽元素的id（我这个<p>元素的id="p1"）。

不懂得事儿先去请教百度！在百度上一搜，原来大家都遇到过这个问题。

这一切的罪魁祸首原因是Firefox中的扩展组件中的有一个“拖拽手势”的功能，你可以选中一部分文字，拖拽它它就会使用设置好的搜索引擎去搜索你选中的内容，拖拽图片它就会在新标签打开这张图片。

我们可以在Firefox右上角的菜单中找到附加组件管理器，打开（或者按下Ctrl+Shift+A打开附加组件管理器）：

在左侧菜单中，选择扩展→附加组件管理器→选项

里面有一个"启用拖拽手势"的选项，取消这个勾它就不会拖拽然后搜索了。

但是不是所有用户都会去关掉这个东西再访问你的网站的，我们从源码下手，阻止Firefox。

我这个例子的源代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>拖放事件练习</title>

     <style>

         div {

             width:200px;

             height:200px;

             background-color:yellow;

             border:1px solid black;

         }

         p {

             background-color:red;

         }

     </style>

 </head>

 <body>

     <!-- ondrop：在指定区域松开鼠标后触发事件 ondragover：有元素拖拽到上面时触发 -->

     <div class="droptarget" ondrop="drop(event)" ondragover="dragOver(event)">

         <!-- draggable：允许拖动 ondragstart：开始拖动元素触发 -->

         <p id="p1" draggable="true" ondragstart="dragStart(event)">一个p元素</p>

     </div>

     <!-- ondrop：在指定区域松开鼠标后触发事件 ondragover：有元素拖拽到上面时触发 -->

     <div class="droptarget" ondrop="drop(event)" ondragover="dragOver(event)">

     </div>

     <script>

         /* p元素开始拖动触发 */

         function dragStart(event) {

             /*

              *设置数据类型（"Text"）和拖动的数据的id（event.target.id），这样事件就能获取到这个元素的全部信息了

              * dataTransfer:这个对象可以保存被拖动的数据

              * dataTransfer.setData:设置要被保存数据的类型以及要被保存的数据;

              */

             event.dataTransfer.setData("Text",event.target.id);

             /* 一个提示信息 */

             console.log("开始拖动元素");

         }

         /* 当鼠标在<div>上松开时触发 */

         function drop(event) {

             /* 获取拖拽中"Text"的元素 */

             var data = event.dataTransfer.getData("Text");

             /* 将拖拽中的元素附加到这个区域中 */

             event.target.appendChild(document.getElementById(data));

             /* 一个提示信息 */

             console.log("元素已被拖动");

         }

         /* 当有元素拖拽到这个区域上的时候触发 */

         function dragOver(event) {

             event.preventDefault();

         }

     </script>

 </body>

 </html>

百度上前人的笔记，拖拽搜索是在ondrop事件触发的时候执行的，在这个事件触发的时候我们去禁止它的事件冒泡行为。

　　那这里我们修改<p>元素的活动范围，也就是两个<div>区域的ondrop事件执行的函数drop()：

 function drop(event) {

     /* 禁止冒泡行为 */

     event.stopPropagation();

     /* 获取拖拽中"Text"的元素 */

     var data = event.dataTransfer.getData("Text");

     /* 将拖拽中的元素附加到这个区域中 */

     event.target.appendChild(document.getElementById(data));

     /* 一个提示信息 */

     console.log("元素已被拖动");

 }

标红加粗的代码就是我新加的代码，这个时候我们再去测试一下<p>在两个<div>区域中拖来拖去是不是不会触发搜索了：

诶，这回不会触发搜索了，但是却跳转到另一个页面去了，这个页面的链接是"拖动元素.com"，我拖动的元素id="p1"，它打开了一个"p1.com"的网站。

然鹅这个问题百度上前辈的笔记并没有提到，但是却有解决办法，那就是在ondrop事件触发的时候，禁止触发事件元素的默认行为（我查到的资料都是这两条一起写，说一个禁止冒泡一个禁止默认行为，却没人提到为什么会跳转到新的页面）：

 function drop(event) {

     /* 禁止冒泡行为 */

     event.stopPropagation();

     /* 禁止默认行为 */

     event.preventDefault();

     /* 获取拖拽中"Text"的元素 */

     var data = event.dataTransfer.getData("Text");

     /* 将拖拽中的元素附加到这个区域中 */

     event.target.appendChild(document.getElementById(data));

     /* 一个提示信息 */

     console.log("元素已被拖动");

 }

标红加粗的代码就是我新加的代码，接下来我们再去测试一下：

这个时候运行效果就跟在Chrome中一样啦。

不过因为我们禁止它冒泡和禁止默认行为是在<div>的ondrop事件触发时执行的函数中定义的，所以你把元素拖拽到其它地方还是会触发的。咱可以去设置<body>触发ondrop事件的时候去禁止冒泡和禁止默认行为。

看似问题解决了，然鹅我还是不清楚为啥禁用默认行为前Firefox会跳转到新的页面去，大概是我搜索的姿势不对吧。我找了一上午，找不到突破口，先把目前已知的部分写下来整理下思路，再继续找一找原因啦。（完了，你这个懒鬼一般说完这句话基本上后面都不会去理会这个问题的[○･｀Д´･ ○]）

如果这篇文章没有更新，那就是我还没有找到原因，并且放弃思考不去深究，打算学深了再回来看这个问题。如果有哪位dalao找到了原因，如果可以的话希望您能留言或者发邮件告诉我帮助我完成这篇笔记，谢谢啦！（(￣ε(#￣)☆╰╮(￣▽￣///)你个懒鬼！）

2019-01-28

拖放事件（drop events）在Firefox上运行会出现的问题的更多相关文章

  1. Firefox上运行自动化测试脚本提示元素无法点击“WebDriverException: Message: Element is not clickable at point“解决方法

    1. Firefox上运行脚本时提示“WebDriverException: Message: Element is not clickable at point (934.316650390625, ...

  2. .net core 运行时事件(Runtime Events)

    .Net Core 2.2.0 .Net Core 2.2.0已经发布有一段时间了,很多新鲜功能已经有博主介绍了,今天给大家介绍一下运行时事件并附上demo. 运行时事件 通常需要监视运行时服务(如当 ...

  3. (转载) 上传文件进度事件,进度事件(Progress Events)

    转载URL:https://www.w3cmm.com/ajax/progress-events.html MDN参考:https://developer.mozilla.org/zh-CN/docs ...

  4. HTML5拖放事件（Drag-and-Drop,DnD）

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...

  5. H5 拖放事件详解

    拖放事件 H5的拖放事件提供了多个接口: 1.drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2.dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转 ...

  6. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

  7. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）

    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...

  8. HTML5的拖放事件

    1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondr ...

  9. HTML5: HTML5 服务器发送事件(Server-Sent Events)

    ylbtech-HTML5: HTML5 服务器发送事件(Server-Sent Events) 1.返回顶部 1. HTML5 服务器发送事件(Server-Sent Events) HTML5 服 ...

随机推荐

  1. pycharm中连接数据库常见问题

    pymysql.err.InterfaceError: (0, '')解决办法   导致这个错误的原因是通过pymysql连接MySQL,没有关闭连接的操作,所以短时间内不会出问题,长时间保持这个连接 ...

  2. shell练习题1

    需求如下: 写一个shell脚本,把10.0.1.0/24网段在线的ip列出来. 参考解答如下 方法1 #!/bin/bash ip="10.0.1." for i in $(se ...

  3. Linux监控

    第三十次课 Linux监控 目录 一. Linux监控平台介绍 二. zabbix监控介绍 三. 安装zabbix 四. 忘记Admin密码如何做 五. 主动模式和被动模式 六. 添加监控主机 七. ...

  4. 为什么使用Nosql：Nosql和SQL的区别

    1.概念: SQL(Structured Query Language)数据库,指关系型数据库.主要代表:SQL Server.Oracle.MySQL.PostgreSQL. NoSQL(Not O ...

  5. Java中String类型的数据比较

    在Java中如果想比较两个字符串是否相等,可以使用string1==string2 或string1.equal(string2)来比较. 但是,第一种方法过于局限.例如, String string ...

  6. C++入门程序作业2

    程序在Dev-C++5.5.3版本运行 结构体的使用 给结构体赋值,打印出结构体中学生姓名,分数,平均分 #include <iostream>#include <cassert&g ...

  7. javascript 中的原型继承

    javascript圆形变成的基本规则: 所有数据都是对象: 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它: 对象会记住它的原型: 如果对象无法响应某个请求,它会把这个请求委托给 ...

  8. python爬虫初级--获取指定页面上的菜单名称以及链接，然后导出

    ''' Created on 2017年4月5日 @author: Admin ''' import requests from bs4 import BeautifulSoup as bsp # 网 ...

  9. 深度学习（PYTORCH）-3.sphereface-pytorch.lfw_eval.py详解

    pytorch版本sphereface的原作者地址:https://github.com/clcarwin/sphereface_pytorch 由于接触深度学习不久,所以花了较长时间来阅读源码,以下 ...

  10. 周强、张季跃，马凯军《面向对象与程序设计Java》第十四周学习总结

    实验十四  Swing图形界面组件 实验时间 20178-11-29 理论部分:不使用布局管理器 有时候可能不想使用任何布局管理器,而只 是想把组件放在一个固定的位置上.下面是将一 个组件定位到某个绝 ...