在元素外部单击时触发事件的指令

我不会使用event.stopPropagation（），因为它确实会引起您在解决方案A中看到的那种问题。如果可能，我还将求助于模糊和聚焦事件。将下拉列表附加到输入后，可以在输入失去焦点时将其关闭。

但是，处理文档上的单击事件也不是很糟糕，因此，如果要避免多次处理同一单击事件，只需在不再需要它时将其与文档解除绑定即可。除了在下拉列表之外单击时要评估的表达式之外，该指令还需要知道它是否处于活动状态：

app.directive('clickAnywhereButHere', ['$document', function ($document) {    return {        link: function postlink(scope, element, attrs) { var onClick = function (event) {     var isChild = $(element).has(event.target).length > 0;     var isSelf = element[0] == event.target;     var isInside = isChild || isSelf;     if (!isInside) {         scope.$apply(attrs.clickAnywhereButHere)     } } scope.$watch(attrs.isActive, function(newValue, oldValue) {     if (newValue !== oldValue && newValue == true) {         $document.bind('click', onClick);     }     else if (newValue !== oldValue && newValue == false) {         $document.unbind('click', onClick);     } });        }    };}]);

使用指令时，只需提供另一个表达式，如下所示：

<your-dropdown click-anywhere-but-here="close()" is-active="isDropdownOpen()"></your-dropdown>

我尚未测试您的onClick功能。我认为它按预期工作。希望这可以帮助。