如何阻止 mousedown 事件在外部元素中触发？答案

【问题标题】：How do I stop mousedown event from triggering in the outer element?如何阻止 mousedown 事件在外部元素中触发？
【发布时间】：2015-10-31 03:22:55
【问题描述】：

我已经实现了 Angular at https://docs.angularjs.org/guide/directive 提供的 Angular 可拖动指令。它基本上只是在 mousedown 事件上放置一个事件侦听器并移动位置直到 mouseup 事件。

<div class="draggable">
  <input type="text"></input>
</div>

当您尝试突出显示输入中的文本时会出现问题。 div 捕获事件并认为 mousedown 是在发出拖动操作的信号，而不是突出显示输入中的文本。

当用户在输入元素中按下鼠标时，如何阻止鼠标按下事件触发 div 鼠标按下事件？

【问题讨论】：

您是否尝试过阻止事件传播？像这样 event.stopPropagation();
event.stopPropagation() 是需要的 - 谢谢

标签： javascript html css angularjs

【解决方案1】：

听起来你要找的是event.stopPropogation

https://api.jquery.com/event.stoppropagation/

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

我看到你提到了 Angular。你可以试试这样的。

.directive('myDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind(mouseover, function (event) {
                event.stopPropagation();
            });
        };
     });

【讨论】：

我的输入（内部 html 元素）不是指令，因此我无法像演示的那样停止传播。但是，我可以通过在输入元素上包含 ng-mousedown="stopEvent($event)" 来捕获事件。然后，在我的控制器中，函数 stopEvent(event) 被调用并触发 event.stopPropagation() 这解决了我的问题 - 谢谢。是否所有浏览器都以类似的方式处理事件传播？输入 mousedown 是否总是在 div mousedown 之前被调用？