【JS】动态添加的元素绑定点击事件在移动端不生效-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JS】动态添加的元素绑定点击事件在移动端不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：使用js动态添加的元素，给该元素绑定了点击事件，在PC端一切正常触发，但是在移动端却无法触发方法。

原因：在移动端,绑定点击事件需要注意使用 touch 事件,而不是鼠标的 click 事件。

常用的触摸事件有:- touchstart:手指触摸屏幕时触发
- touchmove:手指滑动屏幕时连续触发
- touchend:手指离开屏幕时触发

- 避免使用click事件,这是为鼠标设计的
- 对于触屏设备,要区分不同手指的触摸事件
- 可以同时绑定touch和click事件,实现移动端和PC端的兼容

// 方法一:通过addEventListener绑定
element.addEventListener('touchstart', function(){
  //点击处理
}, false); 

// 方法二:直接内联绑定
<div ontouchstart="touch(event)"></div>  

function touch(event) {
  // 点击处理
}

蜂鸟视图的室内地图动态添加的DomMarker无法在移动端进行点击触发的解决方法文章来源地址https://www.toymoban.com/news/detail-558204.html

		// 显示选择起点终点的选项卡
		function showDomMarker(position) {
			if (domMarker) {
				domMarker.remove();
				domMarker = null;
			}
			domMarker = new fengmap.FMDomMarker({
				x: position.x,
				y: position.y,
				domHeight: 80,
				domWidth: 200,
				anchor: fengmap.FMMarkerAnchor.BOTTOM,
				content: `<div style=" display: inline-block; width: 200px; text-align: center;">
		<div style="display: flex;margin-bottom: 10px; border-radius: 6px; background-color: white; text-align: center;">
			<span id="clickStart" style="flex: 1; height: 30px; color: white;padding: 10px 16px; line-height: 30px; background-color: #2F65EE; border-bottom-left-radius: 6px; border-top-left-radius:6px; " onclick=setStart() ontouchstart=setStart()>作为起点</span>
			<span style="flex: 1; height: 30px; padding: 10px 16px; line-height: 30px;" onclick=setEnd() ontouchstart=setEnd()>作为终点</span>
		</div>
		<div style="background-image: url('https://developer.fengmap.com/fmAPI/images/navi/marker.png');display: inline-block; width: 32px; height: 32px;background-size:100%;"></div>
		</div>`,
			});
			var level = position.level;
			var floor = map.getFloor(level);
			domMarker.addTo(floor);
		}

到了这里，关于【JS】动态添加的元素绑定点击事件在移动端不生效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！