I’m trying to respond when the user re-clicks the currently-selected <option>
in a <select>
. Current desktop FF (v95.0.2) fires mousedown
, mouseup
, and click
on the <option>
element itself, and everything captures down and bubbles up through the entire HTMLDocument
hierarchy, including the containing window
.
In the same situation, current desktop Chrome (96.0.4664.110) and Safari (14.1.2) don’t seem to fire any events at all.
<html lang="en" id="thehtml">
<head>
</head>
<body id="thebody">
<select id="theselect">
<option id="option1" value="1">one</option>
<option id="option2" value="2">two</option>
</select>
</body>
<script>
function logEvent(ev) {
console.log(
ev.type +
' target: ' + (ev.target.localName ? `${ev.target.localName} #${ev.target.id}` : `(${ev.target.constructor.name})`) +
' this: ' + (this.localName ? `${this.localName} #${this.id}` : `(${this.constructor.name})`)
);
}
var eventList = ['change', 'click', 'dblclick', 'input', 'mousedown', 'mouseup'];
var elementList = ['thehtml', 'thebody', 'theselect', 'option1', 'option2'];
for (let ev of eventList) {
window.addEventListener(ev, logEvent, true); // capture
window.addEventListener(ev, logEvent, false); // bubble
document.addEventListener(ev, logEvent, true); // capture
document.addEventListener(ev, logEvent, false); // bubble
for (let id of elementList) {
document.getElementById(id).addEventListener(ev, logEvent, true); // capture
document.getElementById(id).addEventListener(ev, logEvent, false); // bubble
}
}
</script>
</html>
Is there any way on Chrome or Safari to detect the user clicking the mouse on the currently-selected <option>
?