HTML-элемент, показывающий неправильный индекс при двойном щелчке в Chrome
У меня есть список, как показано ниже. Я хочу дважды щелкнуть элемент, а затем получить индекс элемента для элемента, по которому дважды щелкнули. Я использую Edge/Chrome. Кажется, он работает в Firefox.
Чтобы увидеть проблему, в Edge запустите фрагмент кода и дважды щелкните элемент. Предупреждение показывает -1. Теперь щелкните элемент, затем дважды щелкните тот же элемент, и в предупреждении отобразится значение индекса.
<select id = "jobs" multiple size = "15" style = " width: 150px; height: 280px" ondblclick = "move('jobright');">
<option value = "1">Day 1 - Sunday</option>
<option value = "2">Day 2 - Monday</option>
<option value = "3">Day 3 - Tuesday</option>
<option value = "4">Day 4 - Wednesday</option>
<option value = "5">Day 5 - Thursday</option>
<option value = "6">Day 6 - Friday</option>
<option value = "7">Day 7 - Saturday</option>
</select>
<script>
function move(direction)
{
var source;
source = document.getElementById('jobs');
alert(source.selectedIndex);
}
</script>Не можете ли вы предоставить минимальный воспроизводимый код, как рекомендовано в SO, который вы, как ожидается, уже знаете?
Я не могу воспроизвести то, что вы говорите, - ваш фрагмент кода работает у меня правильно в Firefox.
@Шон, я не вижу проблем с использованием <select> для этого. Это стандартный способ отображения списка предопределенных элементов из внешнего источника, и это все, что нужно спрашивающему для тестирования своего JavaScript.
Хорошо, тогда похоже на проблему с Edge/Chrome. У меня это тоже работает в Firefox. К сожалению, это необходимо запустить в Edge.
@TylerH Нестандартно пытаться использовать его в контексте, когда вам нужно привязать события двойного щелчка к параметрам. Тем более, что разные пользовательские агенты отображают вещи совершенно по-разному. Например, принятый ответ не будет работать в Safari iOS. Гораздо лучше использовать список кнопок.
@ Шон, конечно, поскольку для этого не существует стандарта; это вопрос предпочтений. Конечно, это необычный выбор, но не неправильный. Что касается iOS Safari, это не имеет значения; ОП явно просит, чтобы что-то работало в Microsoft Edge. Решения не должны касаться совместимости браузеров.
@TylerH Нам придется согласиться не согласиться.
Интересно, что приведенный выше фрагмент кода начал работать несколько дней спустя... хммммм
Ответы 1
Ваша проблема в том, что при двойном щелчке мыши вы сначала выбираете элемент, а затем отменяете его выбор, а это означает, что при срабатывании события ondblclick у вас ничего не выбрано. source.selectedIndex возвращает -1, потому что вы только что отменили выбор этой опции. Вот почему индекс возвращается правильно, когда вы начинаете с выбранного объекта, потому что на этот раз второй щелчок выбирает элемент.
Вы можете решить эту проблему, используя первый аргумент ondblclick, event. (См.: Элемент: dblclick на MDN). Свойство target события будет объектом HTML option, и вы можете использовать option.value для получения его индекса. Вы все равно можете использовать аргумент direction, передав его в качестве второго параметра.
<select id = "jobs" multiple size = "15" style = " width: 150px; height: 280px" ondblclick = "move(event,'jobright');">
<option value = "1">Day 1 - Sunday</option>
<option value = "2">Day 2 - Monday</option>
<option value = "3">Day 3 - Tuesday</option>
<option value = "4">Day 4 - Wednesday</option>
<option value = "5">Day 5 - Thursday</option>
<option value = "6">Day 6 - Friday</option>
<option value = "7">Day 7 - Saturday</option>
</select>
<script>
function move(event, direction) {
alert(event.target.value);
}
</script>
Есть ли причина, по которой вы пытаетесь использовать для этого элемент ввода
<select>? Этот элемент предназначен не для этого.