HTML5知识:Canvas取消事件泡沫与KineticJS传播!
2013-10-21 21:15
489 查看
取消事件泡沫与KineticJS传播,我们可以设置cancelBubble财产的事件对象为true。
说明:点击圆观察,只有圆事件绑定处理因为事件传播被取消当圆事件触发,因此预防事件对象从向上冒泡。
说明:点击圆观察,只有圆事件绑定处理因为事件传播被取消当圆事件触发,因此预防事件对象从向上冒泡。
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script defer="defer"> var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); var circle = new Kinetic.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4 }); circle.on('click', function(evt) { alert('You clicked the circle!'); evt.cancelBubble = true; }); group.on('click', function() { alert('You clicked on the group!'); }); layer.on('click', function() { alert('You clicked on the layer!'); }); group.add(circle) layer.add(group); stage.add(layer); </script> </body> </html>
相关文章推荐
- HTML5里面的一个知识:Canvas二层与KineticJS完成事件!
- html5知识:Canvas的KineticJS事件委托!
- HTML5知识:KineticJS里面Canvas形象的事件!
- HTML5知识:KineticJS里面的Canvas tango形状!
- HTML5知识:Canvas简单形状与KineticJS的Easings类!
- <html5 canvas>一个简单的矩形,clearRect(), strokeRect(), fillRect(), 鼠标事件onmousedown
- JavaScript权威指南_169_第17章_事件处理_17.3-调用事件处理程序-事件传播、事件取消
- HTML5 Canvas鼠标与键盘事件
- 一个不错的HTML5 Canvas多层点击事件监听实例
- 取消事件传播
- HTML5 Canvas鼠标与键盘事件
- HTML5 canvas 内部元素事件响应
- html5 canvas实现不规则形状图片触发事件
- HTML5网页编程代码:Canvas隐藏和显示与KineticJS形状!
- HTML5之Canvas 2D入门5 - 事件与动画
- Html5 手机网页中,长按会触发系统事件,请问怎么取消这些事件?
- 推荐一个html5 canvas的插件kineticjs
- HTML5 Canvas多层点击事件监听实例
- 使用HTML5 canvas做地图(1)基础知识
- [HTML5 Canvas学习] 基础知识