DOM_06之放大计时器、事件、cookie上海时时乐走势

设置触发器

剩下的就是将事件监听器添加到想要长按效果的按钮上。

addEventListener("mousedown", start); addEventListener("click", cancel);

1
2
addEventListener("mousedown", start);
addEventListener("click", cancel);

以上代码合到一起是这样:

// 定义变量 let pressTimer = null; // 创建计时器( 1秒后执行函数 ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行任务 !!! }, 1000) } } // 停止计时器 let cancel = (e) => { // 检查是否有正在运行的计时器 if ( pressTimer !== null ) { clearTimeout(pressTimer); pressTimer = null; } } // 选择 id 为 longPressButton 的元素 let el = document.getElementById('longPressButton'); // 添加事件监听器 el.addEventListener("mousedown", start); // 长按事件取消,取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 定义变量
let pressTimer = null;
 
// 创建计时器( 1秒后执行函数 )
let start = (e) => {
 
    if (e.type === 'click' && e.button !== 0) {
        return;
    }
 
    if (pressTimer === null) {
        pressTimer = setTimeout(() => {
 
            // 执行任务 !!!
 
        }, 1000)
    }
}
 
// 停止计时器
let cancel = (e) => {
 
    // 检查是否有正在运行的计时器
    if ( pressTimer !== null ) {
        clearTimeout(pressTimer);
        pressTimer = null;
    }
}
 
// 选择 id 为 longPressButton 的元素
let el = document.getElementById('longPressButton');
 
// 添加事件监听器
el.addEventListener("mousedown", start);
 
// 长按事件取消,取消计时器
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);

原文参考

6、事件坐标:①参照屏幕左上角:e.screenX,e.screenY;②参照文档显示区左上角:e.clientX或e.x,e.clientY或e.y;③参照所在父元素的左上角:e.offsetX,e.offsetY;

用 Vue 编写一个长按指令

2018/08/22 · JavaScript · Vue

原文出处: Obaseki Nosa   译文出处:kingrychen   

上海时时乐走势图官网 1

有没有想过只需按住一个按钮几秒钟就能在你的 Vue 应用中触发一个功能?

有没有想过创建一个按钮,按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?

想过?太好了,英雄所见略同。

本文就是讲解如何在按下(或者按住)一个按钮时,既执行一个函数,又清除输入。

首先,我会讲解如何使用纯 JS 实现。而后也会创建一个 Vue 指令。

请系好安全带。好戏在后头呢。

1.事件代理
给父元素添加事件,利用事件冒泡原理,在根据e.target来获取子元素
<ul id="parentBox">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
</ul>
let parentBox = document.getElementById('parentBox');
parentBox.addEventListener('click',function(e){
if(e.target && e.target.nodeName === 'LI'){
let item = e.target;
console.log(item);
}
})
2.在循环中使用闭包
var arr = [1,2,3,4,5];
for(var i=0; i<arr.length; i ){
setTimeout(function(){
console.log(i)
},1000)
}
输出结果为:5,5,5,5,5
想要让i输出0,1,2,3,4
方法一使用闭包
for(var i=0; i<arr.length; i ){
setTimeout(function(j){// 这里将值传入
console.log(j)// 这里接受
}(i),1000)// 闭包的使用
}
方法二let关键字
for(let i=0; i<arr.length; i ){
setTimout(function(){
console.log(i)
},1000)
}
3.滚动页面和窗口调整时,触发事件。
核心思想利用setTimeout延迟功能,来处理事件。
// 参数一接受执行函数,参数二延迟时间
function debounce(fn,delay){
// 维护一个timer
let timer = null;
// 能访问timer的闭包
return function(){
// 通过this和arguments获取函数的作用域和变量
let context = this;
let args = arguments;
// 如果事件被调用,清除timer然后重新设置timer
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context,args);
},delay);
}
}

7、页面滚动事件:onscroll;获得页面滚动过的距离:document.body.scrollTop或document.documentElement.scrollTop;

启动函数

这个函数包括一个 setTimeout,它是 JavaScript 中的一个基本方法,允许在特定时间之后执行一个函数。

注意,click 事件执行的过程中,会触发另外两个事件。但是我们需要启动计时器的是 mousedown 事件。如果只是点击事件,不需要启动计时器。

// 创建计时器 ( 1s之后执行函数 ) let start = (e) => { // 如果是点击事件,不启动计时器 if (e.type === 'click' && e.button !== 0) { return; } // 在启动一个定时器之前确保没有正在运行的计时器 if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行任务 !!! }, 1000) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
// 创建计时器 ( 1s之后执行函数 )
let start = (e) => {
    // 如果是点击事件,不启动计时器
    if (e.type === 'click' && e.button !== 0) {
        return;
    }
    // 在启动一个定时器之前确保没有正在运行的计时器
    if (pressTimer === null) {
        pressTimer = setTimeout(() => {
            // 执行任务 !!!
        }, 1000)
    }
}

2、动画:变量:DISTANCE,DURATION,STEPS,step,interval,timer,moved;函数:start():setInterval(moveStep,bind(this),interval);moveStep():对象移动step;

如何实现

当用户点击按钮时,在点击事件之前会触发另外两个事件: mousedownmouseup

当用户按下按钮时触发 mousedown 事件,用户松开按钮时调用 mouseup 事件。

我们需要做的是:

  1. mousedown 事件触发时,启动计时器。
  2. 一旦 mouseup 事件在预期的 2 秒前被触发,就清除计时器,不要执行相应的函数。就当作一个普通的点击事件。

只要计时器在我们预设的时间内没有被清除,即 mouseup 事件没有被触发——那么可以断定用户没有释放按钮。因此,可以判定为一次长按,可以执行关联的函数。

8、cookie:创建:document.cookie=“变量名=值;expires=” date.toGMTString();

实践

让我们深入代码,完成这一功能。

首先,我们必须定义三件事,即:

  1. 一个 变量 用于存储计时器。
  2. 一个 启动 功能函数,用于启动计时器。
  3. 一个 取消 功能函数,用于取消计时器。

1、定时器:①任务函数:函数结尾判断临界值;②启动定时器:a、周期性:timer=setInterval(任务函数,interval);b、一次性:timer=setTimeout(任务函数,wait);③停止定时器:a、周期性:clearInterval(timer);timer=null;b、一次性:clearTimeout(timer);timer=null;

用 Vue 指令包装

创建 Vue 指令时,可以创建全局或局部指令,本文中,我们采用全局指令。

首先,我们必须声明自定义指令的名称。

Vue.directive('longpress', { })

1
2
3
Vue.directive('longpress', {
 
})

这就注册了一个名为 v-longpress 的全局自定义指令。

接下来,我们添加带参数的 bind 钩子函数,它允许我们引用指令绑定的元素,获取传递给指令的值,并标识指令使用的组件。

Vue.directive('longpress', { bind: function(el, binding, vNode) { } })

1
2
3
4
5
Vue.directive('longpress', {
    bind: function(el, binding, vNode) {
 
    }
})

接下来,我们在 bind 函数中添加长按功能的代码。

Vue.directive('longpress', { bind: function(el, binding, vNode) { // 定义变量 let pressTimer = null; // 定义函数处理程序 // 创建计时器( 1秒后执行函数 ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行任务 !!! }, 1000) } } // 取消计时器 let cancel = (e) => { // 检查是否有正在运行的计时器 if ( pressTimer !== null ) { clearTimeout(pressTimer); pressTimer = null; } } // 添加事件监听器 el.addEventListener("mousedown", start); // 取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Vue.directive('longpress', {
    bind: function(el, binding, vNode) {
 
        // 定义变量
        let pressTimer = null;
 
        // 定义函数处理程序
        // 创建计时器( 1秒后执行函数 )
        let start = (e) => {
 
            if (e.type === 'click' && e.button !== 0) {
                return;
            }
 
            if (pressTimer === null) {
                pressTimer = setTimeout(() => {
 
                    // 执行任务 !!!
 
                }, 1000)
            }
        }
 
        // 取消计时器
        let cancel = (e) => {
 
            // 检查是否有正在运行的计时器
            if ( pressTimer !== null ) {
                clearTimeout(pressTimer);
                pressTimer = null;
            }
        }
 
        // 添加事件监听器
        el.addEventListener("mousedown", start);
 
        // 取消计时器
        el.addEventListener("click", cancel);
        el.addEventListener("mouseout", cancel);
    }
})

接下来,我们需要添加一个函数来运行传递给 longpress 指令的方法。

Vue.directive('longpress', { bind: function(el, binding, vNode) { // 定义变量 let pressTimer = null; // 定义函数处理程序 // 创建计时器( 1秒后执行函数 ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行函数 handler(); }, 1000) } } // 停止计时器 let cancel = (e) => { // 检查是否有正在运行的计时器 if ( pressTimer !== null ) { clearTimeout(pressTimer); pressTimer = null; } } // 运行函数 const handler = (e) => { // 执行传递给指令的方法 binding.value(e) } // 添加事件监听器 el.addEventListener("mousedown", start); // 取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Vue.directive('longpress', {
    bind: function(el, binding, vNode) {
 
        // 定义变量
        let pressTimer = null;
 
        // 定义函数处理程序
        // 创建计时器( 1秒后执行函数 )
        let start = (e) => {
 
            if (e.type === 'click' && e.button !== 0) {
                return;
            }
 
            if (pressTimer === null) {
                pressTimer = setTimeout(() => {
                    // 执行函数
                    handler();
                }, 1000)
            }
        }
 
        // 停止计时器
        let cancel = (e) => {
 
            // 检查是否有正在运行的计时器
            if ( pressTimer !== null ) {
                clearTimeout(pressTimer);
                pressTimer = null;
            }
        }
 
        // 运行函数
        const handler = (e) => {
            // 执行传递给指令的方法
            binding.value(e)
        }
 
        // 添加事件监听器
        el.addEventListener("mousedown", start);
 
        // 取消计时器
        el.addEventListener("click", cancel);
        el.addEventListener("mouseout", cancel);
    }
})

现在,可以在 Vue 应用中使用这个指令了,除非使用者给指令传入的值不是一个函数。因此,我们需要通过警告反馈给使用者。

为了反馈给使用者,我们在 bind 函数中添加了以下内容:

// 确保提供的表达式是函数 if (typeof binding.value !== 'function') { // 获取组件名称 const compName = vNode.context.name; // 将警告传递给控制台 let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `; if (compName) { warn = `Found in component '${compName}' ` } console.warn(warn); }

1
2
3
4
5
6
7
8
9
10
// 确保提供的表达式是函数
if (typeof binding.value !== 'function') {
    // 获取组件名称
    const compName = vNode.context.name;
    // 将警告传递给控制台
    let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;
    if (compName) { warn = `Found in component '${compName}' ` }
 
    console.warn(warn);
}

最后,如果这个指令也适用于触屏设备,那会是极好的。因此,我们添加了 touchstart、touchend 和 touchcancel 事件监听器。

最终代码如下:

Vue.directive('longpress', { bind: function(el, binding, vNode) { // 确保提供的表达式是函数 if (typeof binding.value !== 'function') { // 获取组件名称 const compName = vNode.context.name; // 将警告传递给控制台 let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `; if (compName) { warn = `Found in component '${compName}' `} console.warn(warn); } // 定义变量 let pressTimer = null; // 定义函数处理程序 // 创建计时器( 1秒后执行函数 ) let start = (e) => { if (e.type === 'click' && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { // 执行函数 handler(); }, 1000) } } // 取消计时器 let cancel = (e) => { // 检查计时器是否有值 if ( pressTimer !== null ) { clearTimeout(pressTimer); pressTimer = null; } } // 运行函数 const handler = (e) => { // 执行传递给指令的方法 binding.value(e) } // 添加事件监听器 el.addEventListener("mousedown", start); el.addEventListener("touchstart", start); // 取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); el.addEventListener("touchend", cancel); el.addEventListener("touchcancel", cancel); } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Vue.directive('longpress', {
    bind: function(el, binding, vNode) {
 
        // 确保提供的表达式是函数
        if (typeof binding.value !== 'function') {
            // 获取组件名称
            const compName = vNode.context.name;
            // 将警告传递给控制台
            let warn = `[longpress:] provided expression '${binding.expression}' is not a function, but has to be `;
            if (compName) { warn = `Found in component '${compName}' `}
 
            console.warn(warn);
        }
 
        // 定义变量
        let pressTimer = null;
 
        // 定义函数处理程序
        // 创建计时器( 1秒后执行函数 )
        let start = (e) => {
 
            if (e.type === 'click' && e.button !== 0) {
                return;
            }
 
            if (pressTimer === null) {
                pressTimer = setTimeout(() => {
                    // 执行函数
                    handler();
                }, 1000)
            }
        }
 
        // 取消计时器
        let cancel = (e) => {
 
            // 检查计时器是否有值
            if ( pressTimer !== null ) {
                clearTimeout(pressTimer);
                pressTimer = null;
            }
        }
 
        // 运行函数
        const handler = (e) => {
            // 执行传递给指令的方法
            binding.value(e)
        }
 
        // 添加事件监听器
        el.addEventListener("mousedown", start);
        el.addEventListener("touchstart", start);
 
        // 取消计时器
        el.addEventListener("click", cancel);
        el.addEventListener("mouseout", cancel);
        el.addEventListener("touchend", cancel);
        el.addEventListener("touchcancel", cancel);
    }
})

现在可以在 Vue 组件里使用了:

<template> <div> <button v-longpress="incrementPlusTen" @click="incrementPlusOne">{{value}}</button> </div> </template> <script> export default { data() { return { value: 10 } }, methods: { // 增加1 incrementPlusOne() { this.value }, // 增加10 incrementPlusTen() { this.value = 10 } } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
    <div>
        <button v-longpress="incrementPlusTen" @click="incrementPlusOne">{{value}}</button>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            value: 10
        }
    },
    methods: {
        // 增加1
        incrementPlusOne() {
            this.value
        },
        // 增加10
        incrementPlusTen() {
            this.value = 10
        }
    }
}
</script>

. . .

如果你想知道更多关于 自定义指令、可用的 钩子函数、可以传递到这个钩子函数中的 参数函数简写 的信息, 参照 @vuejs 官方文档,作者做了很好的解释。

收工,干杯!

. . .

1 赞 收藏 评论

上海时时乐走势图官网 2

5、事件对象:事件发生时,自动创建封装事件信息的对象event,作为事件处理函数的第一个参数自动传入;①阻止冒泡:e.stopPropagation();②利用冒泡:可减少事件监听对象,但须获得目标元素:target;*(因为事件监听易形成闭包难以释放;);③取消事件(阻止默认行为):e.preventDefault();

原理

要实现长按,用户需要按下并按住按钮几秒钟。

想通过代码模拟这一效果,我们需要在鼠标“点击”按下按钮时,启动一个计时器监听用户按下的时长,如果时间超过我们期望的时长,就执行相应的函数。

非常简单!然而,我们需要知道用户何时按住按钮。

3、事件:用户手动触发,浏览器自动触发,元素状态改变;当事件发生时,浏览器自动调用事件处理函数;绑定事件处理函数:①在元素开始标签中绑定,<button onclick=“js语句(this)”></button>;button.onclick=function(){eval(“js语句(this)”)};单击按钮时,button.onclick();②js中为元素事件处理函数属性赋值:btn.onclick=function(){//this=>button;……};③使用API添加事件监听:a、添加:btn.addEventListener(“事件名”,函数对象);b、移除:btn.removeEventListener(“事件名”,函数对象);

取消函数

这个函数见名知意,用来取消启动函数创建的 setTimeout

要取消 setTimeout ,可以使用 JavaScript 中的 clearTimeout 方法,它主要用来清除 setTimeout() 方法设置的计时器。

在使用 clearTimeout 之前,需要检查 pressTimer 变量是否为 null。如果没有为 null,意味着有一个正在运行的计时器。因此,我们需要先清除它,并且将 pressTimer 变量设置为 null

let cancel = (e) => { // 检查 pressTimer 的值是否为 null if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } }

1
2
3
4
5
6
7
let cancel = (e) => {
    // 检查 pressTimer 的值是否为 null
    if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
    }
}

一旦 mouseup 事件触发,这个函数就会被调用。

4、事件周期:①捕获:从外层元素向内层元素逐个记录绑定事件处理函数,默认暂不触发任何事件;②目标触发:优先触发目标元素上绑定的事件处理函数;*(目标元素为实际点击的元素;);③冒泡:按照捕获的顺序由内层向外层逐层触发捕获的事件处理函数;修改事件触发顺序:btn.addEventListener(“事件名”,函数对象,capture);*(capture表示是否在捕获阶段提前触发,取值true或false);

变量

这个变量主要用来保存 setTimeout 的值,以便当鼠标 mouseup 事件触发时我们可以取消它。

let pressTimer = null;

1
let pressTimer = null;

我们把变量值设置为 null 是为了在执行取消操作前,检查这个变量的值判断当前是否有一个正在运行的计时器。

本文由上海时时乐走势图发布于web前端,转载请注明出处:DOM_06之放大计时器、事件、cookie上海时时乐走势

您可能还会对下面的文章感兴趣: