youtubu点击视频不跳转新标签页

wwwwwllllk

本帖最后由 wwwwwllllk 于 2023-4-23 22:17 编辑

脚本基本可以满足使用，但是遗憾的就是视频点击不跳新标签页问题还没有解决

猜测

1.应该就是点击视频位置可能本身的事件比我先执行，但是我已经在body监听阻止事件了，但是好像不起作用，不知道为什么。
希望哥哥们可以提供思路。

// ==UserScript==
// @name         YouTuBu click text link open new tab
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      0.1.0
// @description  try to take over the world!
// @author       xiaofeiwu
// @match        https://www.youtube.com/
// @run-at       document-end
// @grant        GM_addStyle
// 
// ==/UserScript==

(function () {
    'use strict';

    setTimeout(() => {
        // document.body.addEventListener('click', (event) => {
        //     event.stopPropagation();
        //     event.preventDefault(); 
        // })
        setInterval(() =>{
            const textHrefList = document.querySelectorAll('#video-title-link')
            for (let i = 0; i < textHrefList.length; i++) {
                textHrefList[i].style.backgroundColor = 'skyblue'
            }
            const links = document.querySelectorAll('a[href*="/watch?v="]');
            for (let i = 0; i < links.length; i++) {
                links[i].addEventListener('click', (event) => {
                    event.stopPropagation(); // 阻止事件冒泡
                    event.preventDefault(); // 阻止链接的跳转行为
                    window.open(links[i].href, '_blank'); // 在新标签页中打开链接
                });
            }
        }, 5*1000)
    }, 3000)
})();

cxxjackie

没太理解你的问题，阻止点击不是已经实现了吗？你说的点视频是指图片吗？那个是img，你阻止的是a标签的，就是文字部分，再加上img就行了吧。
body层面拦截事件要把addEventListener的第三个参数设置为true，因为事件是先从外到内捕获，再从内到外冒泡（body捕获→目标捕获→目标冒泡→body冒泡），事件冒泡到body的时候目标元素已经触发完了，此时阻止没有意义。设置为true在body捕获时阻止，即可阻断事件传播到目标元素。参考：https://developer.mozilla.org/zh ... et/addEventListener
滚动刷新用MutationObserver，不会写也可以试试ElementGetter库。
另外阻止事件传播最好用stopImmediatePropagation，跟stopPropagation是有区别的，参考：https://developer.mozilla.org/zh ... mmediatePropagation

steven026

<a>标签习惯用鼠标中键后台打开新标签页，完全没这个烦恼……

wwwwwllllk

cxxjackie 发表于 2023-4-23 21:11
没太理解你的问题，阻止点击不是已经实现了吗？你说的点视频是指图片吗？那个是img，你阻止的是a标签的，就 ...

https://bbs.tampermonkey.net.cn/ ... kpkgrf171orfolh.png

感谢大佬解答，我现在是实现了文字点击新标签页了，其实上面的视频点击刚才又测试了一下，应该就是父级标签的事件先触发进行捕获拦截导致的。这种情况我现在想的只有移除父标签的事件，不知道还有没有其它思路。不过对于我自用其实够了，比较好奇，下次写类似的脚本可以写的更好一点

cxxjackie

我测试了一下，点视频图片可以新标签打开啊，唯一有问题的是短视频那里，链接是/shorts开头所以没匹配到，不知道你说的是不是这个？还有你只match了主页，打开别的以后再点击就无效了，应该不会是这种问题吧。
ElementGetter的each方法就是专门处理此类需求的，还是建议你试试：

1. elmGetter.each('a[href*="/watch?v="], a[href*="/shorts"]', el => {
   
2.     el.addEventListener('click', e => {
   
3.         e.preventDefault();
   
4.         e.stopImmediatePropagation();
   
5.         window.open(el.href, '_blank');
   
6.     });
   
7. });

复制代码

wwwwwllllk

cxxjackie 发表于 2023-4-23 23:01
我测试了一下，点视频图片可以新标签打开啊，唯一有问题的是短视频那里，链接是/shorts开头所以没匹配到， ...

难道是别的脚本和插件影响到了？