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);

//代码3 模拟点击坐标
// 创建持续显示的点击视觉反馈
function simulateClickWithPersistentFeedback(x, y) {
    const element = document.elementFromPoint(x, y);
    
    if (element) {
        // 添加视觉反馈
        const feedback = document.createElement('div');
        feedback.className = 'persistent-click-feedback';
        feedback.style.position = 'fixed';
        feedback.style.left = `${x - 10}px`;
        feedback.style.top = `${y - 10}px`;
        feedback.style.width = '20px';
        feedback.style.height = '20px';
        feedback.style.borderRadius = '50%';
        feedback.style.backgroundColor = 'rgba(255, 0, 0, 0.7)';
        feedback.style.border = '2px solid #fff';
        feedback.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
        feedback.style.pointerEvents = 'none';
        feedback.style.zIndex = '9999';
        feedback.style.animation = 'persistentPulse 1.5s infinite ease-in-out';
        
        // 添加坐标标签
        const coords = document.createElement('div');
        coords.className = 'coords-label';
        coords.textContent = `(${x}, ${y})`;
        coords.style.position = 'absolute';
        coords.style.top = '25px';
        coords.style.left = '0';
        coords.style.fontSize = '12px';
        coords.style.color = '#333';
        coords.style.background = 'rgba(255,255,255,0.8)';
        coords.style.padding = '2px 5px';
        coords.style.borderRadius = '3px';
        coords.style.whiteSpace = 'nowrap';
        
        feedback.appendChild(coords);
        document.body.appendChild(feedback);
        
        // 创建并派发点击事件
        const clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: x,
            clientY: y
        });
        
        element.dispatchEvent(clickEvent);
        return {element, feedback};
    }
    
    return null;
}

// 添加持续脉冲动画的CSS
const style = document.createElement('style');
style.textContent = `
    @keyframes persistentPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
        }
        50% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
        }
    }
    
    .persistent-click-feedback {
        animation: persistentPulse 1.5s infinite ease-in-out !important;
    }
    
    .coords-label {
        font-family: monospace;
        font-weight: bold;
    }
`;
document.head.appendChild(style);

// 清除所有反馈点
function clearAllFeedback() {
    const feedbacks = document.querySelectorAll('.persistent-click-feedback');
    feedbacks.forEach(feedback => {
        document.body.removeChild(feedback);
    });
}

// 使用示例
 simulateClickWithPersistentFeedback(100, 200);
// simulateClickWithPersistentFeedback(300, 150);
// 清除所有反馈点: clearAllFeedback();