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

Question

我已使用以下脚本设置了水平可拖动div。在chrome中，一切正常，并且当我设置draggable='false'时，子图像不会变暗。

在我阅读here时，在FireFox中，属性draggable='false'不够。我已经针对上述问题（ondragstart="return false"尝试了旧的和更新的答案，并且它们都在屏幕上的一个简单图像上工作，但就我而言，我认为它在某处已被鼠标上的drag-handlig脚本覆盖上级我找不到在CSS或SCRIPT中发生冲突的地方。

注意：如您在脚本中看到的那样，我假设单击事件的移动小于8px，并且问题在移动8px之后开始。实际上，在Firefox中，移动8像素后，就会从父对象上剪切图像，您可以将其拖动到窗口中的任何位置。

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>

Answer 1

由于图像是<a>标签的子元素，因此我也必须在ondragstart="return false"标签上添加<a>。实际上，<a>标签首先接收了mousdown事件，并且图像被其父锚淹没。

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>