手机调试以及click事件移动端不起作用

906 阅读1分钟

使用vConsole在移动端查看log日志

vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性:

  • 查看 console 日志
  • 查看网络请求
  • 手动执行 JS 命令行
  • 自定义插件

使用:

loadScript( "https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js",
  () => {    
        try {     
              const vConsole = new VConsole();  
              console.log("Hello world", process.env.NODE_ENV);   
         } catch (e) {  
              console.log("***error***:", "vConsole Error"); 
        }  
});
const loadScript = (url, successFn) => {
    const head =  document.getElementsByTagName('head')[0] || document.documentElement;
    const script = document.createElement('script');   
    script.src = url;    
    script.onload = function() {      
       if (typeof successFn === 'function') {          
            successFn();   
      }      
     script.onload = null;     
   if (head && script.parentNode) {     
        head.removeChild(script);    
       }   
   };  
  head.insertBefore(script, head.firstChild);
};

移动端 监听点击事件失效的解决方案及其原因

原因:

因为ios低版本(例如:12.3.1)浏览器的window、document、body不能触发click事件,按钮和链接才能触发click事件。

解决办法:

1. 如果只是移动端:可以换成监听touchstart 方法.

例如:

 document.addEventListener('touchstart', (e) => {
  });

2. 给选定的元素加样式

  .selector{
      cursor: pointer;
  }