JavaScript: Opening HTML dropdown panel on MouseOver using JavaScript.

There could be a scenario where you have to open Dropdown panel on ‘mouseover’. It could become more irritating if you don't do it right. I got a JavaScript method to do that.

The code is below and demo could be seen here. (https://jsfiddle.net/SiddharthMishra/kzdkpmvq/1/embedded/result/)

You can play with it by using JSFiddle.

JSFiddle:

HTML Code: 

We have created a simple HTML Dorpdown element here.

<select id="actionList">        <option action="">ACTIONS</option>        <option action="add">ADD NEW</option> <option action="edit">EDIT</option> </select>

JavaScript Code: 

We will add JavaScript methods to ‘ onmouseover ’ and ‘onmouseleave’ events.

var actionList = document.getElementById("actionList"); actionList.onchange =  function () { templateAction(templateActionList); } actionList.onmouseover =  function () { selectElementMouseover(actionList); } actionList.onmouseleave =  function () { selectElementMouseleave(actionList); } function selectElementMouseover(element) {     fireEvent(element, "mousedown");     fireEvent(element, "mouseup"); } function selectElementMouseleave(element) {     fireEvent(element, "mousedown"); }

Now below method will take care of the rest:

// To fire any event from JavaScript. function fireEvent(node, eventName) {     var doc;     if (node.ownerDocument) {         doc = node.ownerDocument;     } else if (node.nodeType == 9) {         doc = node;     } else {         throw new Error("Invalid node passed to fireEvent: " + node.id);     }     if (node.dispatchEvent) {         var eventClass = "";         // Different events have different event classes.         switch (eventName) {             case "click": // 'click' works correctly in Safari.                           // For other we should use 'mousedown' or 'mouseup'.             case "mousedown":             case "mouseup":                 eventClass = "MouseEvents";                 break;             case "focus":             case "change":             case "blur":             case "select":                 eventClass = "HTMLEvents";                 break;             default:                 throw "fireEvent: Couldn't find an event class for event '"                          + eventName + "'.";                 break;         }         var event = doc.createEvent(eventClass);         var bubbles = eventName == "change" ? false : true;         // All events created as bubbling and cancelable.         event.initEvent(eventName, bubbles, true);          event.synthetic = true;          node.dispatchEvent(event, true);     } else if (node.fireEvent) {         var event = doc.createEventObject();         event.synthetic = true;          node.fireEvent("on" + eventName, event);     } };

Reference: http://jsfiddle.net/mendesjuan/rHMCy/4/