在具有不可拖动的儿童图像的可拖动div上的FireFox问题

Question

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

正如我在这里读到的那样，在FireFox中，属性draggable='false'是不够的。 我已经在上面的问题（ ondragstart="return false" ）上尝试了旧的和更新的答案，并且它们都在屏幕上的一个简单图像上工作，但在我的情况下，我想在某处它被拖动手柄脚本覆盖父div。 我无法在CSS或SCRIPT中找到发生冲突的位置。

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

 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>标签的子图，我不得不在<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>