如何在Android WebView中通过触摸事件获取DOM元素并修改类？

你遇到的报错核心原因是触摸事件回调里的e是事件对象，不是触发事件的DOM元素本身，所以e.classList自然是undefined。咱们来一步步修正：

问题分析 #

你原来的touchstart代码里用了e.classList.toggle('newclass')，但e代表的是TouchEvent对象，它并没有classList属性——你需要的是触发这个事件的按钮元素，也就是事件的目标对象。

修正后的代码方案 #

有两种简单的方式获取到目标元素：

方案1：使用e.target获取触发事件的元素 #

newNode.addEventListener("touchstart", function(e) {
    alert("test");
    e.target.classList.toggle('newclass'); // 这里用e.target代替e
}, false);

方案2：使用this指向绑定事件的元素 #

因为addEventListener的回调里，this默认指向绑定事件的DOM节点（也就是newNode），所以也可以这样写：

newNode.addEventListener("touchstart", function(e) {
    alert("test");
    this.classList.toggle('newclass'); // 用this直接访问元素
}, false);

额外注意事项（WebView配置） #

为了确保WebView里的JavaScript能正常运行，别忘了在Android代码里开启相关配置：

• 启用JavaScript：webSettings.setJavaScriptEnabled(true);
• 如果需要处理触摸事件的兼容性，也可以同时监听click事件（避免部分设备触摸事件不触发）：

// 同时绑定touchstart和click，兼顾不同场景
function handleButtonClick(e) {
    alert("test");
    this.classList.toggle('newclass');
}
newNode.addEventListener("touchstart", handleButtonClick, false);
newNode.addEventListener("click", handleButtonClick, false);

这样修改后，alert和类切换功能应该都能在Android WebView里正常工作了。

内容的提问来源于stack exchange，提问作者Muhammad Dyas Yaskur