Select 触发 mouseout/mouseleave 事件

Question

下面我隐藏了div-

<div id="testDIV" style="background-color: #4cff00; padding: 20px;">
        <select>
            <option>OptionA</option>
            <option>OptionB</option>
        </select>
    </div>

使用此代码 -

$("#testDIV").mouseleave(function () {
            $(this).animate({ 'opacity': 0 }, 500, function () { $(this).remove(); });
        });

如果用户 select 一个选项，mouseleave 也会触发...

如何在用户 select 一个选项时禁用 mouseout/mouseleave 事件。

Answer 1

我已将您的代码放在 jsfiddle 中进行测试，在 MacOs X 上，我没有遇到您遇到的问题。

我指定 OS，因为 Windows 和 Mac Os X 的样式不同。

当 select 打开时，您的选项是否会超出 div？

这可以解释这种行为。 div选中时，鼠标会在div之外。

如果是这样，解决方案是将 height 设置得足够大，这样选项就不会超出 div.

希望对你有帮助。

编辑：

您可以使用 "this" 测试事件的目标，它是附加到事件的元素。如果不同，则不触发隐藏功能。

$("#testDIV").mouseleave(function (event) {
    if (event.target !== this) return;

    event.stopImmediatePropagation();
    $(this).animate({ 'opacity': 0 }, 500, function () {
    $(this).remove(); 
  });
});

Answer 2

这是你需要的吗？

var $div = $("#testDIV");

function mLeave(e){
  $div.animate({ 'opacity': 0 }, 500, function () { $div.remove(); });
}
$div.on('mouseleave', mLeave );

$("#testDIV select").click(function () {
  $div.off('mouseleave', mLeave );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testDIV" style="background-color: #6287c1; padding: 20px;">
        <select>
            <option>OptionA</option>
            <option>OptionB</option>
        </select>
    </div>

Answer 3

所以它应该只在用户选择选项 A 或 B 时删除 html？也许添加一个默认值 "Please select" 并首先检查该值。如果没有选择任何东西，请不要删除 html.

HTML

<div id="testDIV" style="background-color: #4cff00; padding: 20px;">
<select>
  <option value="default">Please select</option>
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>
</div>

jQuery

   var optionVal;

    $("#testDIV").mouseleave(function () {
      if(optionVal != "default"){
        $(this).animate({ 'opacity': 0 }, 500, function () { $(this).remove(); });
      }
    });
    $("#testDIV select").on('click change', function () {
      optionVal = $(this).val();
    });

Select 触发 mouseout/mouseleave 事件

Select triggers mouseout/mouseleave event

html

jquery

mouseleave

mouseout