javascript的内联样式更改不能在移动浏览器(chrome/dolphin/android)上工作:为什么?

inline style changes by javascript don't work on mobile browsers (chrome/dolphin/android): why?

本文关键字：android dolphin chrome 为什么 工作 浏览器 样式 移动 不能 javascript      更新时间：2023-09-26

jfiddle link

预期行为(在pc/windows浏览器上执行): h1标题"gif"消失，视频播放

移动行为: gif不消失-但视频做播放(所以js正在发射)

为什么显示开关不能在移动(android) chrome上工作的方式，它在Windows chrome?

relivant代码:

this.play();
this.removeAttribute("controls"); //works
//h1.style.display="none"; //does not work
this.previousSibling.style.display="none"; //does not work

onclick在触摸设备中不是一个有效的事件。尝试ontouchstart的移动版本。触摸事件对象也不包含offsetY。相反，您可以在移动和桌面浏览器上使用pageY。

我移动了show/hide函数，并将它们附加到video元素的onplay/onpause事件。

我不知道为什么它没有工作的另一种方式，但这个解决方案工作如预期。参见下面的代码:

vidx.onplay = function() {
    h1.style.display="none";
    vidx.removeAttribute("controls");
}
vidx.onpause = function() {
    h1.style.display="block";
    vidx.setAttribute("controls","true");
}
相关文章：