使用Html5的时候，在Canvas上绘制的东西是不能相应鼠标事件的，但是使用jTopo添加事件非常简单，效果如下： 代码示例： 代码如下: var node = new JTopo.Node("Hello"); node.setLocation(409, 269); node.mousedown(function(event){ if(event.button == 2){ node.text = 按下右键; }else if(event.button == 1){ node.text = 按下中键; }else if(event.button == 0){ node.text = 按下左键; } }); node.mouseup(function(event...
最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋 代码如下: Document .box > canvas { position: absolute; } function getRect(obj) { var x1 = obj.offsetLeft; var y1 = obj.offsetTop; var x2 = x1+obj.offsetWidth; var y2 = y1+obj.offsetHeight; return { x1: x1, y1: y1, x2: x2, y2: y2 }; } f...
1、获取视频时间长度 当视频载入video后，使用 onloadedmetadata 事件获取视频的时间长度。 代码如下: video.onloadedmetadata = function () { var vLength = video.duration; console.log(vLength); } 2、当前视频的播放进度 当视频开始播放时，可以使用 ontimeupdate 事件获取视频当前播放的进度。当video对象的 currentTime 属性发生改变时触发 ontimeupdate 事件。currentTime 属性是浮点小数，可取到 12 位数的小数位数。 代...
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。 标签的属性代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码代码如下: //audio和vi...
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(#p1).click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Ca...
你我都知道在HTML5网页中添加鼠标滚轮事件能够更好的让用户与网页进行交互操作。而在HTML5中，鼠标滚轮并不仅仅就只能上下滑动网页，实际上你还可以依靠这个完成更多的功能，比如视野平面的放大与缩小。 看看实际演示效果 大部分浏览器都是支持鼠标滚轮事件的，所以你可以先订阅鼠标滚轮事件的方法，每当事件被触发时，你能获取一个名为 wheelDelta 的属性，它代表刚才鼠标滚轮改变的大小，其中正值表示滚轮往下滑动，负值表示滚轮...
WebSockets Web Sockets 是用于 Web 应用程序的新一代双向通信技术，运行在单一套接字之上，它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。 一旦取得 Web 服务器上的 Web Socket 连接之后，就可以通过调用 send() 方法从浏览器发送数据到服务器上，通过 onmessage 事件处理程序从服务器接收数据到浏览器中。 下面是创建一个新的 WebSocket 对象的 API。JavaScript Code复制内容到剪贴板var Socket = new WebSocket(url, [pr...
今天遇到一个新需求，经理要求评论功能需要限制字数，就像微博那样限制最多输入150字，这里就需要实时提醒用户还能输入多少字了。 在最开始的时候，想到的是监听keyup事件，然后计算用户输入的字数，但是有些按键（比如删除键）并不会触发事件。后来查了一下html5新增了一个input事件，这个事件与change事件类似，但change事件是在元素失去焦点时才会触发，input事件在元素值变化时就会触发目前来说除了IE89以外，其它浏览器支持的...
触摸事件是移动浏览器特有的HTML5事件，虽然click事件在pc和移动端更通用，但是在移动端会出现300ms延迟，较为影响用户体验，300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。所以触摸事件反应更快，体验更好。触摸事件的类型： 为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。 注意: 在很多...
这篇文章主要介绍了HTML5 Canvas的事件处理介绍,本文讲解了Canvas的限制、给Canvas元素绑定事件、isPointInPath方法、循环重绘和事件冒泡等内容,需要的朋友可以参考下DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个<path id="p1">元素，可以直接用jquery增加click事件$(...
这篇文章主要介绍了HTML5 Video标签的属性、方法和事件汇总介绍,本文讲解了前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。<video>标签的属性代码如下:src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏...
这篇文章主要介绍了关于HTML5触摸事件实现移动端简易进度条的实现方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下前言HTML中新添加了许多新的事件，但由于兼容性的问题,许多事件都没有广泛的应用，接下来为大家介绍一些好用的移动端触摸事件: touchstart、touchmove、touchend。介绍下面我们来简单介绍一下这几个事件:touchstart： 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove...
本篇文章主要介绍了浅谈html5之sse服务器发送事件EventSource介绍，具有一定的参考价值，有兴趣的可以了解一下前言我前面文章讲过数据大屏,里面的数据时时更新。还有时时更新的股票数据，Facebook/Twitter 更新、估价更新、新的博文、赛事结果等等，都需要数据时时更新。之前我们一般都是请求服务器，看看有没有可以更新的数据。html5提供了Server-Sent Events方法，通过服务器发送事件，更新能够自动到达。Server-Sent Events使用...
官网的这个例子中 onforminput事件 貌似没有执行，代码：<html><head> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用 output 元素的简易计算器：</p> <form onsubmit="return false"> <input id="num_a" /> + <inpu...
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safar...