无法模拟用户单击HTML通过JavaScript选择控件



我正在尝试编写一个简单的JavaScript代码(通过Chrome扩展名注入页面),该代码将打开HTML SELECT CONTROM的选项列表),所以我考虑过模拟用户单击控件。我可以通过JavaScript触发单击事件,但是Select控件拒绝了我的尝试。

function triggerClick(domElmId) {
    let domElm = document.getElementById(domElmId);
    triggerEvent(domElm, 'mouseover');
    triggerEvent(domElm, 'mousedown');
    triggerEvent(domElm, 'click');
    triggerEvent(domElm, 'mouseup');  
}
function triggerEvent(domElm, eventName) {
    let options = {pointerX: 0, pointerY: 0, button: 0, ctrlKey: false, altKey: false, shiftKey: false, metaKey: false, bubbles: true, cancelable: true};
    let eventType = 'MouseEvents';
    let oEvent = null;
    oEvent = new MouseEvent(eventName, options);
    domElm.dispatchEvent(oEvent);
}

代码示例:https://codepen.io/anon/pen/mbegaq

有什么想法?

浏览器不允许在JavaScript中扩展<select>。然后只能通过单击鼠标来扩展。

但是,如果您确实需要这样做。有一个解决方案:https://code.google.com/archive/p/expandselect/

这可以通过创建另一个带有多个选项的<select>来起作用。然后将其放在旧的控件上。

另外,请查看这个问题以获取一些想法:是否可以使用JS打开HTML选择以显示其选项列表?

最新更新