论坛 › 问答互助 › 小白求助关于截切版监听问题

纸趣 发表于 2023-7-10 22:22:38

小白求助关于截切版监听问题

我想字节写个线上考试查题插件，用自己上传的题库。
在我自己的测试网站功能已经能正常使用，但是到了生产环境就出现了问题。
1，在实际环境里
window.addEventListener('mouseup', function(event) {
var selectedText = window.getSelection().toString(); // 获取选中的文字
    alert(selectedText);
    for(let i=0;i<tiku.length;i++){
      if(tiku.includes(selectedText)){
            h.innerHTML ="";
            for(let j = 0;j<tiku.length;j++){
                h.innerHTML += tiku+"<br/>";

            }
            i=tiku.length;
            break;
      }
    }
});
window.addEventListener('copy', function() {
    let text = window.getSelection().toString();
    alert(text);
    for(let i=0;i<tiku.length;i++){
      if(tiku.includes(text)){
            h.innerHTML ="";
            for(let j = 0;j<tiku.length;j++){
                h.innerHTML += tiku+"<br/>";

            }
            i=tiku.length;
            break;
      }
    }
});


这两个函数不起作用。


2，在实际环境里我插入div不能被鼠标拖动。


我的全部代码如下
// ==UserScript==
// @name         查题001
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptiontry to take over the world!
// @author       zhiqu
// @match      https://main.ahjxjy.cn/*
// @match      file:///C:/Users/Le'novo/Desktop/tiku.html
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.
// @grant      GM_addStyle
// @require      https://unpkg.com/xlsx/dist/xlsx.full.min.js
// ==/UserScript==

GM_addStyle('#parentDIV { height: 2000px;} #suspensionBox { width: 230px; height: 400px;border: 1.5px solid red; border-radius: 5px;}.scrollTop{position:fixed;top:100px;z-index = 200；font-size:15px;line-height:30px;}');

var tiku;
var outdiv;
var h;

(function() {

    let d1 = document.createElement("div");
    d1.setAttribute("id", "parentDIV")
    outdiv = document.createElement("div");
    outdiv.setAttribute("id", "suspensionBox")

    outdiv.innerHTML = '<input type="file" id="excelFile" accept=".xlsx, .xls" /><button id="convertBtn">导入题库</button>';
    document.body.appendChild(d1).appendChild(outdiv);
    document.getElementById('convertBtn').addEventListener('click', function() {
      var inputFile = document.getElementById('excelFile').files;
      if (inputFile) {
            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var arrayBuffer = e.target.result;
                var workbook = XLSX.read(arrayBuffer, {type:'array'});
                var worksheet = workbook.Sheets];
                tiku = XLSX.utils.sheet_to_json(worksheet, {header:1});
            };
            fileReader.readAsArrayBuffer(inputFile);
      }
    });
    let timer = setInterval(() => {
      if(tiku != null){
            outdiv.innerHTML = "";
            h = document.createElement("p");
            h.innerHTML = "请复制题干进行查题";
            outdiv.appendChild(h);
            clearInterval(timer);//任务完成释放任务
      }
    }, 1000);

})();

window.addEventListener('mouseup', function(event) {
var selectedText = window.getSelection().toString(); // 获取选中的文字
    alert(selectedText);
    for(let i=0;i<tiku.length;i++){
      if(tiku.includes(selectedText)){
            h.innerHTML ="";
            for(let j = 0;j<tiku.length;j++){
                h.innerHTML += tiku+"<br/>";

            }
            i=tiku.length;
            break;
      }
    }
});
window.addEventListener('copy', function() {
    let text = window.getSelection().toString();
    alert(text);
    for(let i=0;i<tiku.length;i++){
      if(tiku.includes(text)){
            h.innerHTML ="";
            for(let j = 0;j<tiku.length;j++){
                h.innerHTML += tiku+"<br/>";

            }
            i=tiku.length;
            break;
      }
    }
});

window.onscroll=function(){
    var t = document.documentElement.scrollTop||document.body.scrollTop;
    var suspensionBox = document.getElementById("suspensionBox");
    suspensionBox.className = "scrollTop";
}

var suspensionBox = document.getElementById('suspensionBox');
var mouseX, mouseY;

suspensionBox.addEventListener('mousedown', function(e) {
    mouseX = e.clientX - suspensionBox.offsetLeft;
    mouseY = e.clientY - suspensionBox.offsetTop;
});
document.addEventListener('mousemove', function(e) {
    if (mouseX && mouseY) {
      var newLeft = e.clientX - mouseX;
      var newTop = e.clientY - mouseY;

      suspensionBox.style.left = newLeft + 'px';
      suspensionBox.style.top = newTop + 'px';
    }
});
document.addEventListener('mouseup', function() {
    mouseX = null;
    mouseY = null;
});

/*

*/

!(data/attachment/forum/202307/10/222101wg2rgoedg8grodap.png)

这是实际环境下的


!(data/attachment/forum/202307/10/222159h118qeazeoq2fe2y.png)
这是我想要的效果

纸趣 发表于 2023-7-10 22:24:15

我的js是这两天现学的希望能讲的细一些

李恒道 发表于 2023-7-11 01:49:52

脚本放在https://scriptcat.org/search
论坛贴链接就好了

还有就是需要一个可以复现的页面

纸趣 发表于 2023-7-11 10:18:24

李恒道 发表于 2023-7-11 01:49
脚本放在https://scriptcat.org/search
论坛贴链接就好了



复现页面需要登陆账号后才行

纸趣 发表于 2023-7-11 10:59:18

参数        描述
type       
必需。事件名称。

请勿使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。

所有 HTML DOM 事件都列在：

HTML DOM Event 对象参考手册

function       
必需。事件发生时运行的函数。

当事件发生时，将事件对象作为第一个参数传递给函数。

事件对象的类型取决于指定的事件。例如，"click" 事件属于 MouseEvent 对象。

capture       
可选（默认 = false）。

true - 处理程序在捕获阶段执行
false - 处理程序在冒泡阶段执行

第一个问题已解决，在捕获阶段执行就行了

李恒道 发表于 2023-7-11 15:10:59

纸趣 发表于 2023-7-11 10:18
复现页面需要登陆账号后才行

第二个问题应该是mousedown和mousemove事件问题
你测试页面也没测试过移动吧
mousedown是仅在点击左键的时候触发一次
按道理如果点击位置也会慢慢偏移？

纸趣 发表于 2023-7-17 17:32:22

李恒道 发表于 2023-7-11 15:10
第二个问题应该是mousedown和mousemove事件问题
你测试页面也没测试过移动吧
mousedown是仅在点击左键的 ...

第二个问题在测试页面没有问题，在实际环境下不可以，监听函数没有被触发。看了控制台原网页有两个监听鼠标按下事件的监听器猜测应该是它们引起的。
不过现在的基本功能已经实现了，美中不足就是我自己添加的div标签会阻挡到原网页的元素，不知道应该用什么解决这个问题

李恒道 发表于 2023-7-18 20:16:56

纸趣 发表于 2023-7-17 17:32
第二个问题在测试页面没有问题，在实际环境下不可以，监听函数没有被触发。看了控制台原网页有两个监听鼠 ...

第一个可能是阻断了
只能对网页分析进行处理了
关于阻挡得问题一般是选择合适位置插入页面
这个是很正常得情况
如果不阻挡得话就看不到你的元素了
如果想要鼠标点击的话
我记着可以使用CSS穿透
但是行为更不好控制了

查看完整版本: 小白求助关于截切版监听问题