javascript simulate (trigger) mouse events

　　 Testimonials:
　　Difficult programmers often encounter all kinds of strange requirements, and often think of strange ways to solve problems.

　　 Scenario:
　　Recently, a plug-in is used to display a large number of pictures. The packaging logic of the plug-in is very complex, and the documentation is almost zero. To modify its code is an almost impossible task. Therefore, I want to manually trigger a mouse click event to activate its internal processing code and complete the corresponding operation without modifying any code of the plug-in or reading any code of the plug-in.

　　It's easy to simply trigger mouse events, even easier with jQuery: $("#container").trigger("click");

　　but I need to simulate a mouse click somewhere on the container. Reading the documentation of javascript carefully, I found a way to activate a mouse click event at a specific location. After testing, when the plugin I use receives two events, mouseDown and mouseUp, and the location has not changed, it will perform the operation I need. Then my code is as follows:

function simulateClick(){
	//The click position is the middle of the screen
	var sx = window.innerWidth / 2, sy = window.innerHeight / 2, cx = sx, cy = sy;
	var eventDown = document.createEvent("MouseEvents");
	eventDown.initMouseEvent("mousedown",true,true,window,0,
		sx, sy, cx, cy, false, false, false, false, 0, null);
	var eventUp = document.createEvent("MouseEvents");
	eventUp.initMouseEvent("mouseup",true,true,window,0,
		sx, sy, cx, cy, false, false, false, false, 0, null);
	$("#container")[0].dispatchEvent(eventDown);
	$("#container")[0].dispatchEvent(eventUp);
}

　　Later, this method was used to solve the problem that the plug-in does not support touch screen movement. By attaching events and tracking output, it is found that the plug-in cannot respond to touchstart, touchmove, and touchend events well. The touchmove event is directly ignored. If the touch screen moves immediately, the mousedown, mousemove, and mouseup events will not be triggered. Convert touchstart/touchmove/touchend to mousedown/mousemove/mouseup events.
　　The above needs can be solved with a custom event and then trigger mechanism.

            /**
             * event is the event of jquery. The real event is event.originalEvent
             * Use the new method to handle. http://wallimn.itey.com
             */
            function touchEventToMouseEvent(event,eventType){
                if(!event.originalEvent || !event.originalEvent.targetTouches || event.originalEvent.targetTouches.length!=1)
                    return null;
                var te = event.originalEvent.targetTouches[0];
                var clientX = te.clientX,clientY=te.clientY,screenX=te.screenX,screenY=te.screenY;

                var simEvent = new MouseEvent(eventType,{clientX:clientX,clientY:clientY,screenX:screenX,screenY:screenY,button:0,buttons:0});
                return simEvent;
            }

    function findElm(){
        var elm = $(".pivot_layer[title]");
	elm.bind("touchmove",function(e){
	var simEvent = touchEventToMouseEvent(e,"mousemove");
	if(simEvent!=null){
	    $(this)[0].dispatchEvent(simEvent);
	}
	});
	elm.bind("touchstart",function(e){
	console.log("touchstart");
	var simEvent = touchEventToMouseEvent(e,"mousedown");
	if(simEvent!=null){
	    $(this)[0].dispatchEvent(simEvent);
	}
	});
	elm.bind("touchend",function(e){
	console.log("touchend");
	var simEvent = touchEventToMouseEvent(e,"mouseup");
	if(simEvent!=null){
	    $(this)[0].dispatchEvent(simEvent);
	}
	});
        }
    }
    $(function(){
        findElm ();
    });

　　Note: initMouseEvent is a method that will be deprecated. It is recommended to use the new MouseEvent() method instead. The above code is based on the jQuery plugin.