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

自己写的一个在不同搜索引擎间快速跳转的脚本，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也没给出有效方案。

阅读 1.2k

// 创建图像元素的函数，接受图片链接和点击事件处理函数作为参数 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);

// @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/*

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

js 如何将Key属性相同的放在同一个数组？

如何防止接口的 key 泄露?

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

在购买页面，这里有： for 1 month, for 3 months，这里说的意思是什么呢？

Next.js做纯前端是否可行？

请问开发React Native，一般是推荐哪个主流的UI库呢？