我不会使用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功能。我认为它按预期工作。希望这可以帮助。
