首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

动态创建的图像行不会触发click事件

动态创建的图像行不会触发click事件,这是因为click事件是针对已经存在于DOM中的元素的。对于动态创建的元素,需要使用事件委托(event delegation)的方法来监听click事件。

事件委托是将事件监听器添加到父元素上,而不是直接添加到目标元素上。当事件触发时,事件会冒泡到父元素,然后在父元素上触发事件处理程序。在事件处理程序中,可以通过事件对象的target属性来获取触发事件的元素,然后根据需要进行处理。

以下是一个使用事件委托来监听动态创建的图像行的click事件的示例代码:

代码语言:javascript
复制
// 获取父元素
const parentElement = document.querySelector('#parent');

// 添加事件监听器
parentElement.addEventListener('click', function(event) {
  // 获取触发事件的元素
  const targetElement = event.target;

  // 判断触发事件的元素是否为图像行
  if (targetElement.classList.contains('image-row')) {
    // 处理click事件
    console.log('Image row clicked');
  }
});

// 动态创建图像行
const imageRow = document.createElement('div');
imageRow.classList.add('image-row');
parentElement.appendChild(imageRow);

在上面的示例代码中,我们首先获取了父元素,然后添加了一个click事件监听器。在事件处理程序中,我们通过事件对象的target属性获取了触发事件的元素,然后判断该元素是否为图像行。如果是图像行,则进行相应的处理。最后,我们动态创建了一个图像行,并将其添加到父元素中。由于使用了事件委托,即使是动态创建的图像行,也能够正常触发click事件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Unity游戏开发】你真的了解UGUI中的IPointerClickHandler吗?

马三在最近的开发工作中遇到了一个比较有意思的bug:“TableViewCell上面的某些自定义UI组件不能响应点击事件,并且它的父容器TableView也不能响应点击事件,但是TableViewCell上面的Button等组件却可以接受点击事件,并且如果单独把自定义UI控件放在一个UI上面也可以接受点击事件”。最后马三通过仔细地分析,发现是某些自定义的UI组件实现方法的问题。通常情况下,如果想要一个UI响应点击事件的话,我们只需要实现IPointerClickHandler这个接口就可以了,但是在我们项目中的TableView继承自MonoBehavior,并且实现了IPointerClickHandler, IPointerDownHandler, IPointerUpHandler,IDragHandler等UI接口,此时如果我们的自定义UI组件只实现了IPointerClickHandler接口,而没有实现 IPointerDownHandler 接口,然后又作为TableViewCell里面的一个Child的话,就会出现TableViewCell接收不到点击事件,TableView也接收不到点击事件。点击事件被诡异地“吞没了”!下面我们简单地设计三个不同情况下的模拟测试来复现一下这个bug。

02
领券