Javascript模拟真实点击代码分享

在做爬虫时经常会涉及到模拟点击、模拟输入等场景，当时很多情况下elment.click() 并不会触发事件  今天给大家分享一个模拟真实点击的效果

直接见代码

// 代码1 （简单版）
const input = document.querySelectorAll(".xxx")[0];
const phone = 'xxxxxxxxxxxx';

// 设置值
input.value = phone;

// 触发各种事件
input.dispatchEvent(new Event('focus', { bubbles: true }));
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
input.dispatchEvent(new Event('blur', { bubbles: true }));

//代码2 完整版

/**
 * 强制点击网页中的任意元素
 * @param {string|HTMLElement} selector - CSS选择器或DOM元素
 * @param {boolean} [bubble=true] - 是否冒泡
 */
function forceClick(selector, bubble = true) {
  let element;
  
  // 如果传入的是选择器字符串
  if (typeof selector === 'string') {
    element = document.querySelector(selector);
    if (!element) {
      console.error(`未找到匹配的元素: ${selector}`);
      return false;
    }
  } 
  // 如果传入的是DOM元素
  else if (selector instanceof HTMLElement) {
    element = selector;
  } 
  // 无效参数
  else {
    console.error('参数必须是选择器字符串或DOM元素');
    return false;
  }

  // 创建并触发鼠标事件
  const mouseEvent = new MouseEvent('click', {
    view: window,
    bubbles: bubble,
    cancelable: true,
    composed: true
  });

  // 触发事件
  const clicked = element.dispatchEvent(mouseEvent);
  
  // 如果事件没有被阻止默认行为，调用元素的click方法
  if (clicked && !mouseEvent.defaultPrevented) {
    element.click();
  }

  return clicked;
}

// 使用示例
// 1. 通过选择器强制点击
forceClick('.catui-item-list-block-cover');

// 2. 通过DOM元素强制点击
//const btn = document.getElementById('my-button');
//forceClick(btn);

// 3. 禁止事件冒泡
forceClick('.catui-item-list-block-cover', false);