javascript - 这段js脚本中的图片click事件无效?

Question

自己写的一个在不同搜索引擎间快速跳转的脚本，image的click事件无效。

// ==UserScript==// @name         快速切换搜索// @namespace    https://viayoo.com/// @version      0.1// @description  try to take over the world!// @author       You// @run-at       document-start// @match        *baidu.com*// @match        *bing.com*// @match        *google.com*// @match        *so.com*// @match        *sogou.com*// @grant        none// ==/UserScript==(function() {'use strict';// 创建浮动框var floatingBox = document.createElement('div');floatingBox.style.cssText = 'position: fixed; bottom: 20px; width: 400px; height: 220px; background-color: rgba(0, 0, 0, 0.5); border: 1px solid #ffffff; border-radius: 5px; z-index: 9999; cursor: move; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; left: 50%; transform: translateX(-50%); text-align: center;';// 创建第一个图像元素var image1 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico')// 创建第二个图像元素var image2 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico');// 创建第三个图像元素var image3 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico');// 创建第四个图像元素var image4 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico');// 创建图像元素的函数，接受图片链接和点击事件处理函数作为参数function createImage(src) {  var image = document.createElement('img');  image.src = src;  image.style.width = '50px';  image.style.height = '50px';  image.style.cursor = 'pointer';  image.style.display = 'block'; // 设置图片为块级元素  image.style.margin = '0 auto'; // 居中图片  return image;}function bing() { // (www|m).baidu.com，无论是手机ua还是电脑ua都是document.getElementById('kw').value  if (/baidu\.com/.test(location.host)) {    let value = document.getElementById('kw')      .value;    let url = 'http://cn.bing.com/search?q=';    location.assign(url + value);  }  // sogou是按域名区分的  // m.sogou.com document.getElementById('keyword').value  // www.sogou.com document.getElementById('upquery').value  if (/m\.sogou\.com/.test(location.host)) {    let value = document.getElementById('keyword')      .value;    let url = 'http://cn.bing.com/search?q=';    location.assign(url + value);  }  if (/www\.sogou\.com/.test(location.host)) {    let value = document.getElementById('upquery')      .value;    let url = 'http://cn.bing.com/search?q=';    location.assign(url + value);  }  // google的都是document.querySelector('textarea[name="q"]').value  if (/google\.[a-z]{2,3}/.test(location.host)) {    let value = document.querySelector('textarea[name="q"]')      .value;    let url = 'http://cn.bing.com/search?q=';    location.assign(url + value);  }  // yahoo document.querySelector('input[name=p]').value  if (/yahoo\.com/.test(location.host)) {    let value = document.querySelector('input[name=p]')      .value;    let url = 'http://cn.bing.com/search?q=';    location.assign(url + value);  }  // so.com document.querySelector('input[name=q]').value  if (/\.so\.com/.test(location.host)) {    let value = document.querySelector('input[name=q]')      .value;    let url = 'http://cn.bing.com/search?q=';    location.assign(url + value);  }}function baidu() {  // bing.com document.querySelector('[name=q]').value  if (/bing\.com/.test(location.host)) {    let value = document.querySelector('[name=q]')      .value;    let url = 'http://www.baidu.com/s?tn=baidu&rn=50&wd=';    location.assign(url + value);  }  // sogou是按域名区分的  // m.sogou.com document.getElementById('keyword').value  // www.sogou.com document.getElementById('upquery').value  if (/m\.sogou\.com/.test(location.host)) {    let value = document.getElementById('keyword')      .value;    let url = 'http://www.baidu.com/s?tn=baidu&rn=50&wd=';    location.assign(url + value);  }  if (/www\.sogou\.com/.test(location.host)) {    let value = document.getElementById('upquery')      .value;    let url = 'http://www.baidu.com/s?tn=baidu&rn=50&wd=';    location.assign(url + value);  }  // google的都是document.querySelector('textarea[name="q"]').value  if (/google\.[a-z]{2,3}/.test(location.host)) {    let value = document.querySelector('textarea[name="q"]')      .value;    let url = 'http://www.baidu.com/s?tn=baidu&rn=50&wd=';    location.assign(url + value);  }  // yahoo document.querySelector('input[name=p]').value  if (/yahoo\.com/.test(location.host)) {    let value = document.querySelector('input[name=p]')      .value;    let url = 'http://www.baidu.com/s?tn=baidu&rn=50&wd=';    location.assign(url + value);  }  // so.com document.querySelector('input[name=q]').value  if (/\.so\.com/.test(location.host)) {    let value = document.querySelector('input[name=q]')      .value;    let url = 'http://www.baidu.com/s?tn=baidu&rn=50&wd=';    location.assign(url + value);  }}// 为每个图像元素添加点击事件监听器image1.addEventListener('click', bing);image2.addEventListener('click', bing);image3.addEventListener('click', bing);image4.addEventListener('click', bing);// 将图像元素添加到浮动框中floatingBox.appendChild(image1);floatingBox.appendChild(image2);floatingBox.appendChild(image3);floatingBox.appendChild(image4);// 添加到页面document.body.appendChild(floatingBox);// 触摸开始事件处理函数function touchStartHandler(e) {  // 阻止默认滚动行为  e.preventDefault();  // 获取触摸点在浮动框内的位置  var touch = e.touches[0];  var offsetX = touch.clientX - floatingBox.offsetLeft;  var offsetY = touch.clientY - floatingBox.offsetTop;  // 触摸移动事件处理函数  function touchMoveHandler(e) {    // 阻止默认滚动行为    e.preventDefault();    // 设置浮动框的位置    var touch = e.touches[0];    floatingBox.style.left = (touch.clientX - offsetX) + 'px';    floatingBox.style.top = (touch.clientY - offsetY) + 'px';  }  // 触摸结束事件处理函数  function touchEndHandler() {    // 移除事件监听器    document.removeEventListener('touchmove', touchMoveHandler);    document.removeEventListener('touchend', touchEndHandler);  }  // 添加触摸移动和结束事件监听器  document.addEventListener('touchmove', touchMoveHandler);  document.addEventListener('touchend', touchEndHandler);}// 添加触摸开始事件监听器floatingBox.addEventListener('touchstart', touchStartHandler);})()

把function单独粘贴到控制台运行是正常的，但是全部粘贴到控制台后图片的点击事件就没有生效，也没报错。。。询问chatgpt也没给出有效方案。

Answer 1

你难道都没发现，你的脚本都没加载吗

// @run-at       document-end// @match        *://baidu.com/*// @match        *://*.baidu.com/*// @match        *://bing.com/*// @match        *://*.bing.com/*// @match        *://google.com/*// @match        *://*.google.com/*// @match        *://so.com/*// @match        *://*.so.com/*// @match        *://sogou.com/*// @match        *://*.sogou.com/*

Answer 2

测试了一下是@match没有匹配上页面地址，改过来就能加载脚本了

# 不能匹配// @match         *baidu.com*# 匹配// @match         https://www.baidu.com/*

Answer 3

您的脚本在创建图像元素时，没有将图像元素添加到DOM中，因此这些图像元素上的点击事件监听器无法被触发。您需要在创建图像元素后，将它们添加到DOM中，然后再为它们添加点击事件监听器。

在您的代码中，您创建了一个floatingBox元素，并试图将所有图像元素添加到这个浮动框中。然后，您再将floatingBox添加到document.body中。但是，您在添加图像元素到floatingBox之前，就为它们添加了点击事件监听器。因此，这些监听器是在图像元素还没有被添加到DOM中时添加的，所以它们无法工作。

要解决这个问题，您应该在将图像元素添加到floatingBox之后，再为它们添加点击事件监听器。这是修改后的代码片段：

// 创建图像元素的函数，接受图片链接和点击事件处理函数作为参数function createImage(src, callback) {  var image = document.createElement('img');  image.src = src;  image.style.width = '50px';  image.style.height = '50px';  image.style.cursor = 'pointer';  image.style.display = 'block'; // 设置图片为块级元素  image.style.margin = '0 auto'; // 居中图片  image.addEventListener('click', callback); // 在添加到DOM后添加点击事件监听器  return image;}// 创建图像元素var image1 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico', bing);var image2 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico', bing);var image3 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico', bing);var image4 = createImage('https://ms.bdstatic.com/se/static/wiseindex/img/favicon64_587c374.ico', bing);// 将图像元素添加到浮动框中floatingBox.appendChild(image1);floatingBox.appendChild(image2);floatingBox.appendChild(image3);floatingBox.appendChild(image4);

这样，当图像元素被添加到floatingBox中时，它们的点击事件监听器就已经被添加到了DOM中，因此可以被正确触发。