I know about the document.form.button.click()
method. However, I'd like to know how to simulate the onclick
event.
I found this code somewhere here on Stack Overflow, but I don't know how to use it :(
function contextMenuClick()
{
var element= 'button'
var evt = element.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('contextmenu', true, true,
element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
false, false, false, 1, null);
element.dispatchEvent(evt);
}
How do I fire a mouse click event using JavaScript?
(修改后的版本使之无需prototype.js即可工作)
function simulate(element, eventName)
{
var options = extend(defaultOptions, arguments[2] || {});
var oEvent, eventType = null;
for (var name in eventMatchers)
{
if (eventMatchers[name].test(eventName)) { eventType = name; break; }
}
if (!eventType)
throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
if (document.createEvent)
{
oEvent = document.createEvent(eventType);
if (eventType == 'HTMLEvents')
{
oEvent.initEvent(eventName, options.bubbles, options.cancelable);
}
else
{
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
}
element.dispatchEvent(oEvent);
}
else
{
options.clientX = options.pointerX;
options.clientY = options.pointerY;
var evt = document.createEventObject();
oEvent = extend(evt, options);
element.fireEvent('on' + eventName, oEvent);
}
return element;
}
function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
var eventMatchers = {
'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
pointerX: 0,
pointerY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
bubbles: true,
cancelable: true
}
You can use it like this:
simulate(document.getElementById("btn"), "click");
Note that as a third parameter you can pass in 'options'. The options you don't specify are taken from the defaultOptions (see bottom of the script). So if you for example want to specify mouse coordinates you can do something like:
simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 })
You can use a similar approach to override other default options.
Credits should go to kangax. Here's the original source (prototype.js specific).
一种更简单,更标准的模拟鼠标单击的方法是,直接使用事件构造函数创建事件并进行调度。
尽管
MouseEvent.initMouseEvent()
保留了该方法是为了向后兼容,但是应使用MouseEvent()
构造函数来完成MouseEvent对象的创建。
var evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
clientX: 20,
/* whatever properties you want to give it */
});
targetElement.dispatchEvent(evt);
演示:http : //jsfiddle.net/DerekL/932wyok6/
这适用于所有现代浏览器。对于旧版浏览器(包括IE), MouseEvent.initMouseEvent
尽管已被弃用,但不幸的是必须使用它。
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", canBubble, cancelable, view,
detail, screenX, screenY, clientX, clientY,
ctrlKey, altKey, shiftKey, metaKey,
button, relatedTarget);
targetElement.dispatchEvent(evt);
这是一个纯JavaScript函数,它将模拟对目标元素的点击(或任何鼠标事件):
function simulatedClick(target, options) {
var event = target.ownerDocument.createEvent('MouseEvents'),
options = options || {},
opts = { // These are the default values, set up for un-modified left clicks
type: 'click',
canBubble: true,
cancelable: true,
view: target.ownerDocument.defaultView,
detail: 1,
screenX: 0, //The coordinates within the entire page
screenY: 0,
clientX: 0, //The coordinates within the viewport
clientY: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
button: 0, //0 = left, 1 = middle, 2 = right
relatedTarget: null,
};
//Merge the options with the defaults
for (var key in options) {
if (options.hasOwnProperty(key)) {
opts[key] = options[key];
}
}
//Pass in the options
event.initMouseEvent(
opts.type,
opts.canBubble,
opts.cancelable,
opts.view,
opts.detail,
opts.screenX,
opts.screenY,
opts.clientX,
opts.clientY,
opts.ctrlKey,
opts.altKey,
opts.shiftKey,
opts.metaKey,
opts.button,
opts.relatedTarget
);
//Fire the event
target.dispatchEvent(event);
}
这是一个工作示例:http : //www.spookandpuff.com/examples/clickSimulation.html
您可以模拟对DOM中任何元素的单击。这样的东西simulatedClick(document.getElementById('yourButtonId'))
会起作用。
您可以在一个对象传递到options
覆盖默认值(模拟你想要的鼠标键,无论Shift/ Alt/Ctrl持有,等它接受的基础上的选项MouseEvents API。
我已经在Firefox,Safari和Chrome中进行了测试。我不确定Internet Explorer可能需要特殊处理。
从Mozilla开发人员网络(MDN)文档中,您正在寻找HTMLElement.click()。您可以在此处找到更多事件。
根据德里克的回答,我验证了
document.getElementById('testTarget')
.dispatchEvent(new MouseEvent('click', {shiftKey: true}))
即使使用键修饰符也可以正常工作。据我所知,这不是一个过时的API。您也可以在此页面上进行验证。
您可以使用elementFromPoint:
document.elementFromPoint(x, y);
所有浏览器均支持:https : //caniuse.com/#feat=element-from-point
JavaScript代码
//this function is used to fire click event
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
function showPdf(){
eventFire(document.getElementById('picToClick'), 'click');
}
HTML代码
<img id="picToClick" data-toggle="modal" data-target="#pdfModal" src="img/Adobe-icon.png" ng-hide="1===1">
<button onclick="showPdf()">Click me</button>
文章标签:dom-events , javascript , mouseclick-event
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!