Javascript 学习之路:鼠标长按事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" onmousedown="holdDown()" onmouseup="holdUp()" value="鼠标长按" />
        <script type="text/javascript">
            var timeStart,timeEnd,time;//申明全局变量

            function getTimeNow()//获取此刻时间
            {
                var now=new Date();
                return now.getTime();
            }
            function holdDown()//鼠标按下时触发
            {
                timeStart=getTimeNow();//获取鼠标按下时的时间
                time=setInterval(function()//setInterval会每100毫秒执行一次
                {
                    timeEnd=getTimeNow();//也就是每100毫秒获取一次时间
                    if(timeEnd-timeStart>1000)//如果此时检测到的时间与第一次获取的时间差有1000毫秒
                    {
                        clearInterval(time);//便不再继续重复此函数 (clearInterval取消周期性执行)
                    alert("长按");//并弹出代码
                    }
                },100);
            }
            function holdUp()
            {
                clearInterval(time);//如果按下时间不到1000毫秒便弹起,
            }
          </script>
    </body>
</html>
时间: 2024-10-12 22:41:55

Javascript 学习之路:鼠标长按事件的相关文章

javascript 学习之自定义滚动条加滚轮事件

要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定 2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta 1 <!doctype html> 2 <html> 3 <head> 4 <title>拖拽

我的javascript学习之路(一)对象之基础

做了2个多月的ajax项目,对js的学习觉得了深入了不少,把自己的一些学习的经验贴出来,希望对初学者有所帮助,也希望大家能指出我的错误之处或者不当之处. javascript 是基于对象的语言,为什么这么说呢,需要仔细思考. js的单根继承体系需要仔细了解,我觉得在js的世界里本身没有类的概念,他只有对象Object,不像java语言本身就有了Object然后又有Class,js中我们可以自己根据他的语言来构件类这一对象,因为没有语言本身的支持,所以方法就各种各样了,但是只要我们掌握了js的本质

jQuery学习之路(3)- 事件

▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onlo

Qt 学习之路:线程和事件循环

前面一章我们简单介绍了如何使用QThread实现线程.现在我们开始详细介绍如何“正确”编写多线程程序.我们这里的大部分内容来自于Qt的一篇Wiki文档,有兴趣的童鞋可以去看原文. 在介绍在以前,我们要认识两个术语: 可重入的(Reentrant):如果多个线程可以在同一时刻调用一个类的所有函数,并且保证每一次函数调用都引用一个唯一的数据,就称这个类是可重入的(Reentrant means that all the functions in the referenced class can be

JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>句柄添加监听事件</title> <script type="text/javascript" src="tzy.js"></script> </head> <body>

JavaScript学习笔记(四)——js事件之事件绑定、兼容问题

事件捕获:事件从根节点开始,逐级到子节点,若节点绑定了事件动作,则执行动作,继续往下走. 事件冒泡:事件由子节点向跟节点派送,若节点绑定了事件动作,则执行动作,然后继续往上走. 一.怎么绑定事件和移除事件? 由于IE浏览器不支持事件捕获,只支持事件冒泡.因此,其他遵循标准的浏览器都使用W3C定义的函数绑定和移除,IE浏览器则自有一套执行规则.下面分别总结一下W3C和IE的绑定机制: 1.W3C下的事件绑定 添加事件 — addEventListener() 移除事件 — removeEventL

JavaScript学习之路1

1. 变量类型只有var var money=5; var house="big house"; 示例如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script language="javascript"> var schoo

JavaScript学习笔记(十二)---- 事件

核心概念: 事件流:事件流描述的是从页面中接收事件的顺序.IE的事件流是事件冒泡,Netscape的事件流是事件捕获流. 在你点击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面. 1) 事件冒泡:IE的事件流 事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.所有现代浏览器都支持事件冒泡. 事件冒泡的过程,当单击了页面中div元素,这个click事件会按照如下顺序传播: 2) 事件捕获:Netscape Communicator团队提出的另一种事件流 事件捕获的用意在

javascript学习笔记(七):事件详解

HTML事件处理 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button onclick="demo()">按钮</button> 9 <scri