手机屏幕图片点击事件监听 - JavaScript 实现 - 常规

手机屏幕图片点击事件监听 - JavaScript 实现

本文介绍如何在手机屏幕上监听图片加载完成事件，并实现当图片出现后点击触发的操作。

代码实现

// 定义变量，表示图片是否已加载
let imageLoaded = false;

// 绑定点击事件，当图片已经加载时触发
document.addEventListener('click', () => {
  if (imageLoaded) {
    console.log('图片已加载，可以点击');
    // 点击后的操作
  } else {
    console.log('图片未加载，等待中');
    // 等待图片加载的操作
  }  
});

// 监听图片加载完成事件，当图片加载完成后将 imageLoaded 设为 true
const img = document.querySelector('img');
img.addEventListener('load', () => {
  imageLoaded = true;
  console.log('图片加载完成');
});

代码解释

定义一个变量 imageLoaded，用于记录图片是否已加载完成。
使用 document.addEventListener('click', ...) 为整个页面绑定一个点击事件监听。当用户点击屏幕时，该事件会触发。
在点击事件处理函数中，判断 imageLoaded 的值：
- 如果 imageLoaded 为 true，则说明图片已加载完成，可以执行点击后的操作。
- 如果 imageLoaded 为 false，则说明图片尚未加载完成，输出提示信息并等待图片加载完成。
使用 img.addEventListener('load', ...) 为图片元素绑定 load 事件监听，当图片加载完成后会触发该事件。
在 load 事件处理函数中，将 imageLoaded 设为 true，并输出提示信息，表示图片已加载完成。

注意

以上代码仅仅是一个简单的实现方式，实际应用中可能需要根据具体需求进行调整。例如，可以添加一些错误处理机制，或者使用更复杂的逻辑来判断图片是否加载完成。