Question

我正在努力解决在<option> <select>（{1}}（FF，IE，GC等）上没有针对mouseleave / /输入事件的问题

第一个问题（已修复）：只要使用此代码鼠标移动<option>，就下拉隐藏（）s

$("#dropdown_year").mouseleave(function(event){
   event.stopPropagation();

第二个问题：点击下拉菜单，将鼠标向下移动到下拉列表中，然后点击任意位置的页面。下拉列表保持不变......

对此有优雅的解决方案吗？

http://jsfiddle.net/f6fvg/

=====================

HTML

<table border="1" width="100%">
    <tr>
        <td align="center" id="hover_content_swap">EVENT
        <span id="hover_content_swap_off">2012</span>
        <span id="hover_content_swap_on">
            <form style="display:inline" class="dynamic_select">
                <select id="dropdown_year">
                    <option value="event2012.php" selected="selected">2012</option>
                    <option value="event2011.php">2011</option>
                    <option value="event2010.php">2010</option>
                </select>
                </form>
            </span>
        </td>
    </tr>
</table>

的jQuery

$('#hover_content_swap_on').hide();   //HIDE NOW, SHOW ON HOVER

// SWAP CONTENT VISIBILITY ON HOVER
$('#hover_content_swap').hover(function () {
    $('#hover_content_swap_off').hide();
    $('#hover_content_swap_on').show();
}, function() {
    $('#hover_content_swap_off').show();
    $('#hover_content_swap_on').hide();
});

// PREVENT UNINTENDED EVENT PROPAGATION WHEN HOVERING 'OPTIONS'
$("#dropdown_year").mouseleave(function(event){
    event.stopPropagation();
});

http://jsfiddle.net/f6fvg/

Answer 1

这是一个非常酷的主意（在hover事件中切换可编辑字段）。

看看这个version of your jsfiddle。我添加了一个包装器div并附加了一个click事件。 click事件执行“hover-out”操作以重置对象。

您不必使用包装器div - 您可以将click事件附加到DOM中的现有容器。根据你的问题，听起来你会在body上寻找一个事件，但我不确定jsfiddle如何处理它。

编辑：这是updated version of the jsfiddle。此版本包含一个click事件，select可以阻止该事件冒泡，这在下面的评论中提到。

Answer 2

您有两个选择：

jQuery的：

$("#dropdown_year").change(function(){
    $("#hover_content_swap_off").text( $("#dropdown_year option:selected").text() ); 
});

HTML contenteditable ^MSDN ^MDN ^WHATWG：

<table border="1" width="100%">
    <tr>
        <td align="center" id="hover_content_swap">EVENT
        <span id="hover_content_swap_off" contenteditable="true">2012</span>
        </td>
    </tr>
</table>

<option> </option>上的mouseleave事件

2 个答案: