события mouseleave на <option>

Question

Я пытаюсь обойти проблему, при которой никакие события не запускаются при отпускании мышью / введите <option> для <select> (FF, IE, GC и т. Д.)

Первая проблема (исправлена): выпадающие меню Hide (), как только мышь уходит <option> с этим кодом

$("#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

У вас есть 2 варианта:

jQuery:

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

HTML-содержимое ^{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>​

Answer 2

Это действительно крутая идея (переключить редактируемое поле на событие hover).

Посмотрите на эту версию вашего jsfiddle . Я добавил оболочку div и прикрепил к ней событие click. Событие click выполняет действие «hover-out» для сброса объектов.

Вам не нужно использовать оболочку div - вы можете прикрепить событие click к существующему контейнеру в DOM. Исходя из вашего вопроса, звучит так, будто вы искали событие на body, но я не уверен, как jsfiddle справится с этим.

РЕДАКТИРОВАТЬ: Вот обновленная версия jsfiddle . Эта версия включает в себя событие click для select, чтобы остановить это событие, которое упоминается в комментарии ниже.