svelte ios dom 操作

重点不要看标题，

目前用的svelte 版本：3.0.0

demo代码

<script>
	const btn = (e) => {
		e.path[0].innerHTML = e.path[0].getAttribute("val");
	};
</script>

<main>
	<div on:click={btn} val="更换成功">测试点击按钮</div>
</main>

在ios上是没法更新的

isTrusted: true

---

手机上不知道为啥没有，反正就是没有结果，其次，点击事件能获取，但是没有找到方法可以获取当前点击的对象，比如在进行列表操作进行点击操作相关事件进行传参的问题

ios 的操作只能使用原生js的dom操作了

优化后的代码

<script>
	const btn = (e) => {
		// ios无效
		// console.log(e);
		// console.log(e.path);
		// e.path[0].innerHTML = e.path[0].getAttribute("val");

		// 通用方法
		let _btn = document.getElementById("btn");
		_btn.innerHTML = _btn.getAttribute("val");
	};
</script>

<main>
	<div id="btn" on:click={btn} val="更换成功">测试点击按钮</div>
</main>

 

如果是处于一个ul 下面的li这种列表

那就要用原生的js进行处理了，或者全局监控点击事件

<script>
	import { afterUpdate } from "svelte";
	let ul = ["按钮1", "按钮2", "按钮3", "按钮4"];
	const btn = (e) => {
		// ios无效
		// console.log(e);
		// console.log(e.path);
		// e.path[0].innerHTML = e.path[0].getAttribute("val");

		// 通用方法
		let _btn = document.getElementById("btn");
		_btn.innerHTML = _btn.getAttribute("val");
	};

	afterUpdate(() => {
		let li = document.querySelectorAll("ul > li");
		for (let index = 0; index < li.length; index++) {
			const e = li[index];
			e.onclick = (t) => {
				e.innerHTML = ul[index];
			};
		}
	});
</script>

<main>
	<div id="btn" on:click={btn} val="更换成功">测试点击按钮</div>

	<ul>
		<li>测试点击按钮</li>
		<li>测试点击按钮</li>
		<li>测试点击按钮</li>
		<li>测试点击按钮</li>
	</ul>
</main>

 由于用svelte开发pwa的应用，难免会遇到这种情况，始终没找到合适的解决办法

如果对于列表操作有更好的想法，可以评论一下，学习学习