微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

onMouseOver:阻止桌面上的默认行为,同时将其保留在手机上

如何解决onMouseOver:阻止桌面上的默认行为,同时将其保留在手机上

我正在使用onMouSEOver来检测用户在通过手机访问我的Web应用程序时何时点击图片

  <img
            
                  onMouSEOver={(e) => {
                    myImageWidget.open();
                  }}
                />

当他点击图像时,会出现一个小部件并可以上传图像。
使用onMouSEOver的问题在于,当在桌面浏览器上使用Web应用程序时,每当用户将鼠标悬停在图像上时,窗口小部件就会出现。
那么有没有办法在桌面浏览器上阻止这种行为,同时又将这种行为保持在手机上?

解决方法

如果您愿意依靠浏览器的User-Agent字符串,则可以使用is-mobile。注意:似乎无法可靠地检测触摸屏,请参见this thorough article.

import mobile from "is-mobile";

const isMobile = mobile(navigator.userAgent || navigator.vendor);

<img
  onMouseOver={(e) => {
    isMobile && myImageWidget.open();
  }}
/>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。