具有不可拖动子图像的可拖动 div 上的 FireFox 问题

Posted 2023-05-08

【中文标题】具有不可拖动子图像的可拖动 div 上的 FireFox 问题

【英文标题】：FireFox problem on draggable div with non-draggable children image

【发布时间】：2019-10-17 17:53:39

【问题描述】：

我已经使用下面的脚本设置了一个水平可拖动的 div。在 chrome 中，一切正常，并且儿童图像不是 darggable，因为我设置了draggable='false'。

当我阅读here 时，draggable='false' 属性在 FireFox 中是不够的。我已经对上述问题（ondragstart="return false"）尝试了旧的和更新的答案，它们都在屏幕上的一个简单图像上工作，但在我的情况下，我认为它在某个地方被父 div 上的拖动处理脚本覆盖.无论是在 CSS 还是 SCRIPT 中，我都找不到冲突发生的位置。

注意：正如您在脚本中看到的，我假设移动小于 8px 作为点击事件，并且问题在移动 8px 后开始。实际上在 Firefox 中移动 8px 后，图像正在从父级剪切，您可以将其拖动到窗口中的任何位置。

function handle_mousedown(e)

    window.my_dragging = ;
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).scrollLeft();

    $(".catHolder").on("click",function(e)return true;);
    
    function handle_dragging(e)
    	var amount=e.pageX - my_dragging.pageX0;
        var left = my_dragging.offset0 - amount;
        
        if (Math.abs(amount)>8)
       		$(".catHolder").one("click",function(e)return false;);
        
        $(my_dragging.elem).scrollLeft(left);
    
    
    function handle_mouseup(e)
	    $(".catHolder").on("click",function(e)return true;);
        $(window).off('mousemove', handle_dragging).off('mouseup', handle_mouseup);
    
    
    $(window).on('mouseup', handle_mouseup).on('mousemove', handle_dragging);


$(document).ready(function()$(".catHolder").mousedown(handle_mousedown);)

.catHolder
  width:400px;
  max-width:100%;
  border:5px solid #ff8800;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;


.noselect
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;


.catSquare
  display:inline-block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catHolder">

    <div class="catSquare noselect">
      <a href="#" draggable="false">
        <table>
          <tr><td><img ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>    
			
    <div style="clear:both"></div>
</div>

【参考方案1】：

由于图像是<a> 标签的子元素，我不得不在<a> 标签上添加ondragstart="return false"。事实上，<a> 标签首先接收到 mousdown 事件，并且图像被它们的父锚点 darrged。

function handle_mousedown(e)

    window.my_dragging = ;
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).scrollLeft();

    $(".catHolder").on("click",function(e)return true;);
    
    function handle_dragging(e)
    	var amount=e.pageX - my_dragging.pageX0;
        var left = my_dragging.offset0 - amount;
        
        if (Math.abs(amount)>8)
       		$(".catHolder").one("click",function(e)return false;);
        
        $(my_dragging.elem).scrollLeft(left);
    
    
    function handle_mouseup(e)
	    $(".catHolder").on("click",function(e)return true;);
        $(window).off('mousemove', handle_dragging).off('mouseup', handle_mouseup);
    
    
    $(window).on('mouseup', handle_mouseup).on('mousemove', handle_dragging);


$(document).ready(function()$(".catHolder").mousedown(handle_mousedown);)

.catHolder
  width:400px;
  max-width:100%;
  border:5px solid #ff8800;
  -webkit-overflow-scrolling: touch;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;


.noselect
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;


.catSquare
  display:inline-block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catHolder">

    <div class="catSquare noselect">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>
    
    <div class="catSquare">
      <a href="#" draggable="false" ondragstart="return false">
        <table>
          <tr><td><img  ondragstart="return false" draggable="false" src="https://www.codesd.com/static/img/logo.jpg"></td></tr>
          <tr><td>text</td></tr>
        </table>
      </a>
    </div>    
			
    <div style="clear:both"></div>
</div>