onMouseMove не запускает элемент <option>в Chrome

Question

Допустим, у меня есть прослушиватель onMouseMove, который просто регистрирует положение мыши по x и y.

Если я разверну элемент select и наведу указатель мыши на открытые элементы <option>, событие onMouseMove никогда не сработает.

Я думаю, что это может иметь какое-то отношение к этому:

http://www.terminally -incoherent.com / blog / 2009/01/12 / ie-jquery-hovering-and-option-elements /

Кто-нибудь знает, как обойти это?В частности, я хотел бы получить экземпляр элемента <option>, по которому я перемещаюсь в любой момент времени.

Я бы предпочел не изменять элементы <select> или <option>, так как мой коддобавлено расширением chrome, и по этой причине было бы обременительно менять каждую страницу.

Answer 1

Как вы и подозревали, события мыши не работают для выбора / параметра в Chrome

Возможные обходные пути:

• Использование прослушивателя onclickкогда выбрана опция.
• Нарисуйте опции, такие как выпадающий список, используя DHTML
• Используйте выбор с атрибутом "size", обычно используемый для множественного выбора.Опции внутри выделения с атрибутом «size» реагируют на события мыши в Chrome.

Я создал пример третьего варианта здесь:

http://jsfiddle.net/SNLzA/

Это клонирует исходный выбор и скрывает клон.Клону присваивается атрибут размера, чтобы он мог реагировать на события мыши.Затем, когда щелкают по исходному выделению, мы временно показываем клон, который был стилизован, чтобы выглядеть как выпадающий список параметров.Затем, когда пользователь щелкает опцию, мы закрываем клон и устанавливаем значение в исходном выборе.Прослушиватель событий щелчка прикреплен к телу, чтобы закрыть клон, когда он недоступен.

HTML

<select id="s">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

CSS

select { display: block; width: 60px; }

JS

var select = document.getElementById("s"),
    options = select.getElementsByTagName("option"),
    clone = select.cloneNode(true),
    body = document.body,
    isOpen = false,

    closeSelect = function() {     
        select.removeAttribute("size");
        clone.setAttribute("style", "display: none;");       
        isOpen = false;        
        select.value = options[clone.selectedInput];
    },

    openSelect = function(e) {
        isOpen = true;
        clone.setAttribute("style", "display: auto;");
        select.setAttribute("size", options.length); 
        clone.value = options[select.selectedInput];
    };

clone.setAttribute("style", "display: none;");

body.insertBefore(clone, select);

body.addEventListener("click", function(e) {
    if (isOpen === true && e.target != select) {
       closeSelect();
    } 
});

select.addEventListener("click", openSelect);

for (i = 0; i < options.length; i++) {
    options[i].addEventListener("click", function(e) {
        closeSelect();
    });

    options[i].addEventListener("mouseover", function(e) {
        console.log("on option: " + e.target.value);
    });
}