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>?