基于原生WebAPI中的Element Event来生成鼠标事件

基于原生WebAPI中的Element Event来生成鼠标事件

滑块自动拖动的JavaScript代码：

function auto_drag_slider(slider_args) {
    const slider = document.getElementById(slider_args.slider_element_id);
    const slider_track_id = slider_args.slider_track_id


    var drag_result = false;
    var track_width = document.getElementById(slider_track_id).offsetWidth

    var rect = slider.getBoundingClientRect();
    var x = rect.x;
    var y = rect.y;

    // 鼠标左键按下不放
    left_key_press_init_arg = { bubbles: true, cancelable: true, view: window, screenX: x, screenY: y, clientX: x, clientY: y, button: 0 }
    const mouseEve_left_key_press = new MouseEvent("mousedown", left_key_press_init_arg);
    slider.dispatchEvent(mouseEve_left_key_press);

    var move_step_x = 0;
    var move_step_y = 0;


    var interval = setInterval(function () {
        var now_x = x + move_step_x;
        var now_y = y + move_step_y;

        // 鼠标向右拖动
        drag_right_init_arg = { bubbles: true, cancelable: true, view: window, screenX: now_x, screenY: now_y, clientX: now_x, clientY: now_y, button: 0 }
        const mouseEve_mouse_drag_right = new MouseEvent("mousemove", drag_right_init_arg);
        slider.dispatchEvent(mouseEve_mouse_drag_right);

        if ((now_x - x) >= track_width) {
            clearInterval(interval);

            // 鼠标松开左键，结束流程
            unstuck_left_key_pree = { bubbles: true, cancelable: true, button: 0 }
            const mouseEve_unstuck_left_key_pree = new MouseEvent("mouseup", unstuck_left_key_pree);
            slider.dispatchEvent(mouseEve_unstuck_left_key_pree);
            drag_result = true;
            return drag_result;
        } else {
            move_step_x += Math.ceil(Math.random() * 30);
        }
    },
        30);
}

auto_drag_slider(polyv_web_teacher);

代码中使用的MouseEvent API 的官方文档摘录：

MouseEvent()

MouseEvent() 构造器创建一个 MouseEvent。

语法

event = new MouseEvent(typeArg, mouseEventInit);

形参

typeArgDOMString 格式的事件名称。
mouseEventInit 可选, 初始化 MouseEvent 的字典，

有下列属性字段：

• “screenX”，long 型可选，默认为 0，设置鼠标事件发生时相对于用户屏幕的水平坐标位置；该操作并不会改变真实鼠标的位置。
• “screenY”，long 型可选，默认为 0，设置鼠标事件发生时相对于用户屏幕的垂直坐标位置；该操作并不会改变真实鼠标的位置。
• “clientX”，long 型可选，默认为 0，设置鼠标事件时相对于客户端窗口的水平坐标位置；该操作并不会改变真实鼠标的位置。
• “clientY”，long 型可选，默认为 0，设置鼠标事件时相对于客户端窗口的垂直坐标位置；该操作并不会改变真实鼠标的位置。
• “ctrlKey”，Boolean 型可选，默认为false，标明是否同时按下 ctrl 键。
• “shiftKey”，Boolean 型可选，默认为false，标明是否同时按下 shift 键。
• “altKey”，Boolean 型可选，默认为 false，标明是否同时按下 alt 键。“metaKey”，Boolean 型可选，默认为false，标明是否同时按下 meta 键。
• “button”，short 型可选，默认为 0，描述了当事件发生时，哪个按键被按下或释放：值含义0主按键被按下（通常为左键）或未初始化1辅助按键被按下 (通常为中键)2次按键被按下 (通常为右键)
• “buttons”，无符号 short 型可选，默认为 0，描述了当事件发生时哪些按键被按下：位域值（Bit-field value）含义0无按键被按下1主按键被按下 (通常为左键)2次按键被按下 (通常为右键)4辅助按键被按下 (通常为中键)
• “relatedTarget”，EventTarget 型可选，默认为 null，若事件为 mouseenter (en-US) 或 mouseover (en-US)，则表示刚离开的元素；若事件为 mouseout (en-US) 或 mouseleave (en-US)，则表示刚进入的元素。
• “region”，DOMString 型可选，默认为null，标明点击事件影响的区域 DOM 的 id。不影响任何区域的话，请传null值。
  另外涉及到的几个核心Event事件：
  mousedown
  mousemove
  mouseup

---

PS: 如果需要更多详细资料，可以跳转到MDN官网查看更多说明

传送🚪：MDN-WebAPI-Element-Mouse events