function random(max) {
return Math.floor(Math.random() * max);
}
function on(dom, type, fn) {
dom.addEventListener(type, fn, false);
}
on(document.body, 'click', function(e) {
console.log('click事件 x:'+e.clientX, 'y:'+e.clientY);
});
/**
* MouseEvent
* 包括事件 click,dblclick,mouseup,mousedown
*/
function mouse() {
var x = random(window.outerWidth),
y = random(window.outerHeight);
var event = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
clientX: x,
clientY: y
});
console.log('click环境 x:'+x, 'y:'+y);
document.body.dispatchEvent(event);
}
mouse();
|
[b]属性[/b] |
[b]选项[/b] | [b]默认[/b] | [b]类型[/b] | [b]描述[/b] |
| bubbles | 可选 | false | Boolean | 事件是否冒泡 |
| cancelable | 可选 | false | Boolean | 事件是否可取消 |
| scoped | 可选 | Boolean | indicating whether the given event bubbles. If this value is true, deepPath will only contain a target node. | |
| composed | 可选 | false | Boolean | 事件是否会影子根(shadow root)之外触发侦听器。 [url=https://aotu.io/notes/2016/06/24/Shadow-DOM/]Shadow DOM[/url]是指在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中。 |
|
[b]属性[/b] |
[b]选项[/b] | [b]默认[/b] | [b]类型[/b] | [b]描述[/b] |
| detail | 可选 | 0 | long长整型 | 根据事件不同意义也会不同。 对 click 或者 dblclick 事件, detail是当前点击数量; 对mousedown或者mouseup事件, detail是1加上当前点击数; 对所有的其它UIEvent对象, detail总是0。 |
| view | 可选 | null | [url=https://html.spec.whatwg.org/multipage/browsers.html#the-windowproxy-exotic-object]WindowProxy[/url] | 与事件相关联的窗口 |
|
[b]属性[/b] |
[b]选项[/b] | [b]默认[/b] | [b]类型[/b] | [b]描述[/b] |
| screenX/screenY | 可选 | 0 | long长整型 | 鼠标事件发生时相对于用户屏幕screen的水平/垂直坐标位置; 该操作并不会改变真实鼠标的位置。 |
| clientX/clientY | 可选 | 0 | long长整型 | 鼠标事件时相对于浏览器窗口viewport的水平/垂直坐标位置,不包含滚动距离; 该操作并不会改变真实鼠标的位置。 |
| ctrlKey | 可选 | false | Boolean | 按下了Ctrl键 |
| shiftKey | 可选 | false | Boolean | 按下了Shift键 |
| altKey | 可选 | false | Boolean | 按下了Alt键 |
| metaKey | 可选 | false | Boolean | 按下了Meta键 |
| button | 可选 | 0 | short短整型 | 当事件发生时哪个按键被按下或释放; 0:左键 1:中建 2:右键 |
| buttons | 可选 | 0 | 无符号short | 当事件发生时哪些按键被按下; 0:无按键按下 1:左键 2:中建 4:右键 |
| relatedTarget | 可选 | null | [url=https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget]EventTarget[/url] | 标明刚离开的元素 (发生在事件 mouseenter 或 mouseover); 或刚进入的元素 (发生在事件 mouseout 或 mouseleave)。 |
| region | 可选 | null | DOMString | 点击事件影响的区域DOM的id |
on(document.body, 'touchstart', function(e) {
var touch = e.touches.item(0);
console.log('touchstart x:' + touch.clientX, 'y:' + touch.clientY);
});
on(document.body, 'touchmove', function(e) {
var touch = e.touches.item(0);
console.log('touchmove x:' + touch.clientX, 'y:' + touch.clientY);
});
on(document.body, 'touchend', function(e) {
var touch = e.changedTouches.item(0);
console.log('touchend x:' + touch.clientX, 'y:' + touch.clientY);
});
on(window, 'scroll', function(e) {
console.log('scroll timestamp:' + e.timeStamp);
});
/**
* TouchEvent
* 包括事件 touchstart,touchend,touchmove,touchcancel
*/
function touchstart(x, y, number) {
var touch = new Touch({
identifier: number,
target: document.querySelector('.drag'), //随便设置的
clientX: x,
clientY: y
});
console.log('touchstart环境 x:' + x, 'y:' + y);
var event = new TouchEvent('touchstart', {
touches: [touch],
targetTouches: [touch],
changedTouches: [touch]
});
document.body.dispatchEvent(event); //touchstart
}
function touchmove(x, y, interval, number) {
var touch = new Touch({
identifier: number,
target: document.querySelector('.drag'), //随便设置的
clientX: x,
clientY: y + interval
});
var event = new TouchEvent('touchmove', {
touches: [touch],
targetTouches: [touch],
changedTouches: [touch]
});
document.body.dispatchEvent(event); //touchmove
}
function touch() {
var x = random(window.outerWidth),
y = random(window.outerHeight),
number = 1,
interval = 10;
touchstart(x, y, number);
number++;
touchmove(x, y, interval, number);
number++;
interval += 10;
touchmove(x, y, interval, number);
number++;
interval += 10;
touchmove(x, y, interval, number);
document.body.scrollTop = interval; //自动滚动
}
setTimeout(function() {
touch();
}, 2000);
|
[b]属性[/b] |
[b]选项[/b] | [b]默认[/b] | [b]类型[/b] | [b]描述[/b] |
| identifier | 必填 | long长整型 | 一个触摸点的数字标记,唯一标识符。 | |
| target | 必填 | EventTarget | 触点最开始被跟踪时(在 touchstart 事件中),位于的HTML元素。 | |
| clientX/clientY | 可选 | 0 | double | 触摸点相对于浏览器窗口viewport的位置,不包含滚动距离,这个值会根据用户对可见视区的缩放行为而发生变化。 |
| screenX/screenY | 可选 | 0 | double | 触摸点相对于屏幕screen的位置。在IOS中与clientX/clientY属性不同,不会受到initial-scale的影响; 而在安卓中微信和UC会受之影响,而手机版chrome与红米note自带的浏览器不会被影响。 |
| pageX/pageY | 可选 | 0 | double | 和clientX/clientY属性不同,这个值是相对于整个html文档的坐标,这个值包含了垂直滚动的偏移。 |
| radiusX/radiusY | 可选 | 0 | float | 能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)/垂直轴(Y轴)半径。 |
| rotationAngle | 可选 | 0 | float | 以度为单位的旋转角,由radiusX和radiusY描述的正方向的椭圆; 通过顺时针旋转这个角度后,能最精确地覆盖住用户和触摸平面的接触面的角度。 |
| force | 可选 | 0 | float | 手指挤压触摸平面的压力大小,从0.0(没有压力)到1.0(设备可识别的最大压力)的浮点数。 |
|
[b]属性[/b] |
[b]选项[/b] | [b]默认[/b] | [b]类型[/b] | [b]描述[/b] |
| touches | 可选 | [] | [url=https://developer.mozilla.org/zh-CN/docs/Web/API/TouchList]TouchList[/url] | TouchList类型(包含了一系列Touch对象的数组),当前位于屏幕上的所有手指的列表。 |
| targetTouches | 可选 | [] | TouchList | 与touches类似,但是增加了个过滤条件,要与第一个手指点的地方(同一个节点内)相同。 |
| changedTouches | 可选 | [] | TouchList |
在touchstart中:列出在此次事件中新增加的触点。如果同时放下一根或两根
苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有
联系客服
客服电话:
400-000-3129
微信版
扫一扫进微信版
返回顶部
|