当前位置:首页 > 电脑网络 > 正文内容

【备忘】原生 JS 监听未来元素事件实例

语言黑洞3年前 (2021-02-09)电脑网络572

最近发现的一个社区化(?)或者说分布式的微博系统——Mastodon(官方中文译万象,网民又称长毛象),简单说就是任何人都可以使用其源码搭建一个微博站点并各自允许用户注册,不同站点的用户又可以相互发现和关注……

↓↓↓

注册 - 长毛象中文站

https://acg.mn/invite/DXwRtTMG

Mastodon - 搜索结果 - 知乎

https://www.zhihu.com/search?type=content&q=Mastodon

↑↑↑

其实关于 Mastodon 的介绍就只有上边这些。详细请自行注册了解……

问题是关注了几个更新纸片人的机器人后,发现 NSFW 太烦人了,,这个到是找到了现成的脚本:

↓↓↓

Mastodon NSFW Remover

https://greasyfork.org/zh-CN/scripts/29228-mastodon-nsfw-remover

↑↑↑

然而点击图片后加载大图实在略慢。。试着写了下边代码实现在鼠标划过图片时自动替换为大图(虽然感觉效果和效果有偏差,先发出来再调整)

// 原生js未来元素事件监听的写法 - 笑场 - CSDN博客
// https://blog.csdn.net/xianglikai1/article/details/76100177

// JS获取元素属性和自定义属性 - 马优晨 - CSDN博客
// https://blog.csdn.net/qq_24147051/article/details/77976844
(function () {
  "use strict";
  function $n(e) {
    return document.querySelector(e);
  }
  function $na(e) {
    return document.querySelectorAll(e);
  }
  // 直觉应该用mouseenter,然而并不是
  $n(".app-holder").addEventListener("mouseover", function (e) {
    console.log(e.target);
    console.log(e.target.nodeName);
    console.log(e.target.className || "class为空");
    // 实际代码
    if (e.target.nodeName === "IMG") {
      let src = e.target.getAttribute("src");
      src = src.replace("small", "original");
      e.target.setAttribute("src", src);
      let srcset = e.target.getAttribute("srcset");
      srcset = srcset.replace("small", "original");
      e.target.setAttribute("srcset", srcset);
    }
  }, false);
})();

扫描二维码推送至手机访问。

版权声明:本文由水水的演示站发布,如需转载请注明出处。

本文链接:https://demo.wdssmq.com/post/19.html

分享给朋友:

相关文章

Chrome 再次试图隐藏地址栏中的 www 部分

Chrome 再次试图隐藏地址栏中的 www 部分

注:本文发布于 2018 年 9 月,之后版本取消了本文所提及的改动,然后本人也已经改用 Edge; 不知道什么时候起,,浏览器的地址栏会默认隐藏掉网址前的http://协议,而绿锁版的https://则会保持显示。 一直以来,虽然是网...

【折腾】用手机写 Markdown 并发布到 Z-Blog

【折腾】用手机写 Markdown 并发布到 Z-Blog

前言还是 md2zb 系列,而且可能是最蛋疼的一篇。 更多的只是研究能不能实现,而不是我真的有这个需要。 步骤 手机安装 Pocket Git;(收费)手机安装 GitHub 并登录;(免费,好像是官方客户端)准备好 GitH...

【备忘】Z-BlogPHP 常用接口或函数

记录一些常用的接口、常量或函数。 或者了解一下「代码片段」 代码备忘 // 安全检查 $act = GetVars('act', 'GET'); if (GetVars('act', 'GET') == 'save') { Chec...

【折腾】互联网时代的“纸制”积分卡

折腾了一个基于 JWT(JSON Web Tokens)的积分卡功能,由于数据使用 Cookie 存放于用户本地,弄丢了就真的丢了,发现还是蛮像「纸制」积分卡的。。 因为 Z-Blog PHP 1.7 的关系折腾了两个插件: API...

【VSCode】快捷键备忘

[建议]查看 >> 外观 >> 取消显示活动栏的勾选 ← 基本上记住资源管理器、全局搜索、扩展的快捷键后就不需要这个了,可以省掉显示的空间。 [可选]查看 >> 外观 >> 取消显示菜单栏的勾...

【折腾】Python + GitHub Actions 更新 Z-Blog 的探索

前言 起因是看到了这个项目: zhaoolee/WordPressXMLRPCTools: 用 Hexo 的方式管理 WordPress https://github.com/zhaoolee/WordPressXMLRPCTools...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。