• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  拖拽防止火狐浏览器打开新窗口

                  2019-3-22 13:51| 作者: admin| 查看: 216| 评论: 0|来自: 蚂蚁部落

                  最近写了一个简单的拖拽效果,在谷歌浏览器表现毫无问题。

                  很多时候,总是默认为谷歌浏览器和火狐是最接近标准的浏览器,所以在火狐应该也没问题。

                  但是经过测试发现,在火狐中有一个较小的缺陷,那就是拖动完成后,会弹出一个新的选项卡窗口。

                  看如下代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>  
                  <html>  
                  <head>  
                  <meta charset=" utf-8">  
                  <meta name="author" content="http://www.pecf.tw/" />  
                  <title>蚂蚁部落</title>
                  <style>
                  #ant {
                      width:350px;
                      height:100px;
                      padding:10px;
                      background-color: #ccc;
                  }
                  </style>
                  <script>
                  window.onload=function(){
                      let ant=document.getElementById("ant");
                      let dr=document.getElementById("dr");
                       
                      ant.ondragover=function(ev){
                        ev.preventDefault();
                      }
                      dr.ondragstart=function(ev){
                        ev.dataTransfer.setData("Text",ev.target.id);
                      }
                  
                      ant.ondrop=function(ev){
                        let data=ev.dataTransfer.getData("Text");
                        ev.target.appendChild(document.getElementById(data));
                        ev.preventDefault();
                      }
                  }    
                  </script>    
                  </head>
                  <body>
                  <p>按住鼠标拖动图片到矩形框</p>
                  <div id="ant"></div>
                  <br>
                  <img id="dr" src="demo/js/img/dr.png" draggable="true">
                  <script>
                  </script>
                  </body>
                  </html>

                  上述代码可以将底部的图片拖入到矩形框,在谷歌中一切表现完美正常。

                  但是在火狐浏览器中,会在一个新的窗口打开这个图片,这通常并不是我们所需要的。

                  很多教程介绍说,只要使用ev.preventDefault()阻止默认动作?#32431;?#38459;止上述现象,很明显上述措施并没?#20889;?#25104;我们的目的,也许很多教程的作者,仅仅是参考了别人的结论,并没有亲自进行验证,下面介绍一个比较好正规的解决方式。

                  代码修改如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>  
                  <html>  
                  <head>  
                  <meta charset=" utf-8">  
                  <meta name="author" content="http://www.pecf.tw/" />  
                  <title>蚂蚁部落</title>
                  <style>
                  #ant {
                      width:350px;
                      height:100px;
                      padding:10px;
                      background-color: #ccc;
                  }
                  </style>
                  <script>
                  window.onload=function(){
                      let ant=document.getElementById("ant");
                      let dr=document.getElementById("dr");
                       
                      ant.ondragover=function(ev){
                        ev.preventDefault();
                      }
                      dr.ondragstart=function(ev){
                        ev.dataTransfer.setData("Text",ev.target.id);
                      }
                  
                      ant.ondrop=function(ev){
                        let data=ev.dataTransfer.getData("Text");
                        ev.target.appendChild(document.getElementById(data));
                        ev.stopPropagation()
                        ev.preventDefault();
                      }
                  }    
                  </script>    
                  </head>
                  <body>
                  <p>按住鼠标拖动图片到矩形框</p>
                  <div id="ant"></div>
                  <br>
                  <img id="dr" src="demo/js/img/dr.png" draggable="true">
                  <script>
                  </script>
                  </body>
                  </html>

                  不但需要加上ev.preventDefault()阻止默认动作的发生,还需要阻止?#24405;?#20882;泡。

                  核心代码片?#25991;?#22914;下:

                  [JavaScript] 纯文本查看 复制代码
                  ev.stopPropagation()
                  ev.preventDefault();

                  上面的代码缺一不可,否则在火狐中就有可能出现问题。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>