通过JavaScript在选择框中按下向下箭头键的触发事件

Question

由于某些奇怪的原因，我需要通过模拟鼠标和按键事件来更改下拉框中选定的元素，而不是通过 e.selectedIndex。

我尝试了以下方法：

//e = the dropdown
e.focus();

//my custom function to fire mouse events. This opens the dropdown.     
fireMouseEvent("mousedown", e);

//firing the key press, tried it via keydown, keypress and keyup. Nothing works.
var evt = e.ownerDocument.createEvent("KeyEvents");
evt.initKeyEvent("keydown", true, true, null, false, false, false, false, 40, 0);
evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 40, 0);
evt.initKeyEvent("keyup", true, true, null, false, false, false, false, 40, 40);

e.dispatchEvent(evt);

我是否做错了什么或者这是不可能的？

谢谢。

- user429620

---

确实是奇怪的原因。能否解释一下，以便我们可以建议替代方案？ :) - Shadow The Spring Wizard

似乎你可以设置selectedIndex，然后触发所需的事件。 - Josiah Ruddell

如果您正在使用Chrome浏览器（解释为什么无法完成）请查看此链接：https://dev59.com/wnI-5IYBdhLWcg3wW2-p - josh.trow

这是一个需要更改下拉框选定值的Firefox插件。似乎与selectbox相关联的事件在仅设置selectedIndex时不会触发。由于这是一个附加组件，源页面的JavaScript受到保护，我无法调用onchange或其他内容（至少不起作用）。 - user429620

@Wes 如果你使用 fireMouseEvent("change", e);，它不起作用吗？顺便说一下，使用 @ 通知人们你发布了新评论，否则他们将看不到它。 - Shadow The Spring Wizard

@Shadow Wizard - 确实可以！这是怎么做到的？.. 这里使用了initMouseEvent - 我需要进行调查。非常感谢。 - user429620

Answer 1

这对我来说在大多数现代浏览器上都有效。它来自Yahoo UI库，经过了一些编辑: http://developer.yahoo.com/yui/docs/UserAction.js.html

var customEvent;
var type = 'keydown';
var bubbles = true;
var cancelable = true;
var view = window;
var ctrlKey = false;
var altKey = false;
var shiftKey = false;
var metaKey = false;
var keyCode = 40;
var charCode = 40;

try {

    //try to create key event
    customEvent = document.createEvent("KeyEvents");

    /*
     * Interesting problem: Firefox implemented a non-standard
     * version of initKeyEvent() based on DOM Level 2 specs.
     * Key event was removed from DOM Level 2 and re-introduced
     * in DOM Level 3 with a different interface. Firefox is the
     * only browser with any implementation of Key Events, so for
     * now, assume it's Firefox if the above line doesn't error.
     */
    //TODO: Decipher between Firefox's implementation and a correct one.
    customEvent.initKeyEvent(type, bubbles, cancelable, view, ctrlKey,
        altKey, shiftKey, metaKey, keyCode, charCode);       

} catch (ex /*:Error*/){

    /*
     * If it got here, that means key events aren't officially supported. 
     * Safari/WebKit is a real problem now. WebKit 522 won't let you
     * set keyCode, charCode, or other properties if you use a
     * UIEvent, so we first must try to create a generic event. The
     * fun part is that this will throw an error on Safari 2.x. The
     * end result is that we need another try...catch statement just to
     * deal with this mess.
     */
    try {

        //try to create generic event - will fail in Safari 2.x
        customEvent = document.createEvent("Events");

    } catch (uierror /*:Error*/){

        //the above failed, so create a UIEvent for Safari 2.x
        customEvent = document.createEvent("UIEvents");

    } finally {

        customEvent.initEvent(type, bubbles, cancelable);

        //initialize
        customEvent.view = view;
        customEvent.altKey = altKey;
        customEvent.ctrlKey = ctrlKey;
        customEvent.shiftKey = shiftKey;
        customEvent.metaKey = metaKey;
        customEvent.keyCode = keyCode;
        customEvent.charCode = charCode;

    }          

}

//fire the event
document.dispatchEvent(customEvent);

- cdeutsch