Javascript 防止脚本运行

我使用next JS通过单击元素添加类，并通过单击元素外部删除类：

$(function() {
  $('.main').mousedown(function() {
    return $(this).find('.drop').addClass("dropped", 300);
  });
  $('.main').click(function(event) {
    return event.stopPropagation();
  });
  $(document).click(function() {
    return $('.drop').removeClass("dropped");
  });

});

html结构是：

<div class="main">
  <div class="drop">Click Here</div>
</div>
<div class="main">
  <div class="drop">Click Here</div>
</div>
<div class="main">
  <div class="drop">Click Here</div>
</div>
<div class="main">
  <div class="drop">Click Here</div>
</div>

点击这里
点击这里
点击这里
点击这里

这是

---

如您所见，我使用

event.stopPropagation（）

通过单击同一元素来防止

删除类

。但它阻止所有

main

div单击。如何防止只单击

main

div，这意味着如果单击了所有

main

div，然后我单击其中一些，那么其余的都被接受

。removeClass（“已删除”）排除已单击的项。
不确定它是否符合您的需要，但请尝试：


试一试

演示：
like？这些函数中的任何一个都不需要
返回值
。或者，addClass（）不需要时间参数。@Dmitry-see
$('.main').attr('tabindex', -1).css('outline', 'none');

$(document).on('focus blur', '.main', function () {
    $(this).find('.drop').toggleClass('dropped');
});

$(function () {
    $('.main').mousedown(function () {
        return $(this).find('.drop').addClass("dropped", 300);
    });
    $(document).click(function (e) {
        return $('.drop.dropped').not($(e.target).closest('.main').find('.drop')).removeClass("dropped");
    });
});