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

在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. 关于JS 的cookie 操作 与 json 的数据结构 问题

    今天写了一个购物车,由于购物车内容是保存在 cookie中 所以不想浪费服务器资源做cookie的操作 故在前端封装了一些对象来处理购物车,由于cookie的数据结构的设计是一个json格式 使用 账 ...

  2. Linux磁盘故障案例

    原因:由于另外一块磁盘不存在,但是配置文件/etc/fstab中又有挂载的配置,挂载出问题就导致这样的故障. 输入root密码进去 编辑/etc/fstab文件把箭头指向的这一行注释掉或者删除掉.然后 ...

  3. eclipse 中修改项目名称，启动tomct原项目找不到的问题

    eclipse 中修改项目名称,启动tomct原项目找不到的问题 1 在开发和练习中,经常会导入其他开源项目,修改项目名称,部署到tomcat 后,然后访问项目会找不到项目,可能是新项目名称和配置文件 ...

  4. swiper 父级元素display:none 之bug

    问题描述: 同一个页面,点击底部tab按钮切换div的显示与隐藏,点击到第四个页面时 轮播图总是不动,出bug function start(){ var mySwiper = new Swiper( ...

  5. selenium中下拉框的定位

    from selenium import webdriverfrom selenium.webdriver.support.select import Selectimport timedriver ...

  6. centos安装MySQL5.7

    Mysql安装 一.查看是否安装MySQL # rpm -qa | grep mysql 二.查看所有mariadb的软件包 # rpm -qa | grep mariadb 三.删除相关的maria ...

  7. SR-IOV 简介

    SR-IOV 技术是一种基于硬件的虚拟化解决方案,可提高性能和可伸缩性.SR-IOV 标准允许在虚拟机之间高效共享 PCIe(Peripheral Component Interconnect Exp ...

  8. Csrf_token ||| CSRF跨站请求伪造

    # 注: 部分内容参考网上,侵删   CSRF(Cross-site request forgery) 跨站请求伪造,是一种对网站的恶意利用  它会通过伪装成受信任用户的请求来利用受信任的网站来获取一 ...

  9. 点击iframe窗口里的超链接，打开新页面的方式

    点击iframe窗口里的超链接打开新页面的方式: a标签中设置按钮点击事件,事件调用的方法使用如下方法跳转链接:  window.open('url链接', '_blank');

  10. SQL数据库中查询中加N'' 前缀是什么意思

    It's declaring the string as nvarchar data type, rather than varchar You may have seen Transact-SQL ...