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(); });
        });

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

当用户选择一个选项时，如何禁用mouseout / mouseleave事件。

Answer 1

这是你需要的吗？

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 2

所以它应该只在用户选择了选项A或B时删除html？也许添加默认的“请选择”并首先检查值。如果没有选择任何内容而不删除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();
    });

Answer 3

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

我正在指定操作系统，因为在Windows和Mac Os X上样式不同。

当select打开时，你的选项可能会超出你的div吗？

这可以解释这种行为。选择后，鼠标将不在div中。

如果是这种情况，解决办法就是设置一个足够大的height，以便选项不会超出div。

希望它对你有所帮助。

编辑：

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

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

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

选择触发mouseout / mouseleave事件

3 个答案: