[JS] O evento de clique de ligação de elemento adicionado dinamicamente não tem efeito no terminal móvel

Problema: Use o elemento adicionado dinamicamente por js e vincule o evento click ao elemento.Tudo é acionado normalmente no lado do PC, mas o método não pode ser acionado no lado móvel.

Motivo: no lado móvel, você precisa prestar atenção ao usar o evento touch em vez do evento click do mouse ao vincular o evento click.

Os eventos de toque comumente usados ​​são: - touchstart: acionado quando o dedo toca a tela
- touchmove: acionado continuamente quando o dedo desliza na tela
- touchend: acionado quando o dedo sai da tela

- Evite usar o evento de clique, que é projetado para o mouse
- Para dispositivos com tela sensível ao toque, é necessário distinguir os eventos de toque de diferentes dedos
- Você pode vincular eventos de toque e clique ao mesmo tempo para obter compatibilidade entre celular e PC

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

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

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

 A solução que o DomMarker adicionou dinamicamente ao mapa interno do Hummingbird View não pode ser acionada clicando no terminal móvel

		// 显示选择起点终点的选项卡
		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);
		}

Acho que você gosta

Origin blog.csdn.net/liusuihong919520/article/details/131698929
Recomendado
Clasificación