匯東網


UEditor 修改 shCore.js 源码(SyntaxHighlighter)实现改双击为三击触发代码块全选

[編輯] [转简体]
|
作者:huidong | 分類:【編程】HTML/JavaScript
[ 41 瀏覽 0 評論 3 贊 5 踩 ]

概要

正文

ueditor 配了一个代码高亮的第三方库(SyntaxHighlighter),显示代码高亮的 HTML 块在被双击的情况下会被全选。但是一般双击只是选择一个单词,我希望它三击才被全选,因此我改了一下。


在 shCore.js 中有这一行代码

attachEvent(findElement(div, '.code'), 'dblclick', quickCodeHandler);

正是它绑定了双击事件


js 没有现成的三击事件,所以要自己写个处理函数,捕获单击事件进行处理。于是改成

attachEvent(findElement(div, '.code'), 'click', handleClick);

再写 handleClick 函数的实现

// 三击事件的处理函数  
function tripleClickHandler(event) {
    console.log('三击事件触发!');
    quickCodeHandler(event);        // 调用原处理函数
}

// 点击事件的监听函数  
function handleClick(event) {

    if (typeof handleClick.clickInfo == 'undefined') {
        // 用于存储点击次数和时间的对象
        handleClick.clickInfo = {
            count: 0,
            timer: null
        };
    }

    // 增加点击次数  
    handleClick.clickInfo.count++;

    console.log(handleClick.clickInfo.count);

    // 如果点击次数达到3次  
    if (handleClick.clickInfo.count === 3) {
        
        handleClick.clickInfo.count = 0;
        clearTimeout(handleClick.clickInfo.timer);
        handleClick.clickInfo.timer = null;

        // 触发三击事件处理函数  
        tripleClickHandler(event);
    } else {
        // 设置一个定时器来重置点击次数(如果点击间隔太长)  
        handleClick.clickInfo.timer = setTimeout(() => {
            handleClick.clickInfo.count = 0;
            handleClick.clickInfo.timer = null;
        }, 400); // 400 毫秒
    }
}


注意,这里用了 handleClick.clickInfo 来存储点击信息。这是利用函数本身的属性来存储数据,以达到 C 语言中静态变量的效果。

这篇文章还列举了一些其他方法:https://www.delftstack.com/zh/howto/javascript/javascript-static-variables/ 


[ 3] [ 5]


 評論區  0 條評論

+ 添加評論