lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 10:47:59 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improved mouseover and mouseout event handling by ignoring parent handlers if mouse moves from one child to another

Browse Source
This commit is contained in:
Eric Rowell
2012-03-18 11:24:57 -07:00
parent 9a61e149df
commit 84e7e71461
5 changed files with 237 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
tests/js/functionalTests.js
View File

@@ -458,28 +458,54 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - event bubbling': function(containerId) {
'EVENTS - group click events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
layer.on('mouseover', function() {
log('mouseover layer');
group.on('click', function() {
log('click group');
//console.log(this);
});
layer.on('mouseout', function() {
log('mouseout layer');
//console.log(this);
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
name: 'red'
});
group.on('mouseover', function() {
log('mouseover group');
//console.log(this);
});
group.on('mouseout', function() {
log('mouseout group');
var greenCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 40,
strokeWidth: 4,
fill: 'green',
stroke: 'black',
name: 'green'
});
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
},
'EVENTS - group mousemove events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
group.on('mousemove', function() {
log('mousemove group');
//console.log(this);
});
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
@@ -489,14 +515,6 @@ Test.prototype.tests = {
stroke: 'black'
});
redCircle.on('mouseover', function() {
log('mouseover red circle');
//console.log(this);
});
redCircle.on('mouseout', function() {
log('mouseout red circle');
//console.log(this);
});
var greenCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
@@ -506,13 +524,45 @@ Test.prototype.tests = {
stroke: 'black'
});
greenCircle.on('mouseover', function() {
log('mouseover green circle');
//console.log(this);
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
},
'EVENTS - group mouseover events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
name: 'group'
});
greenCircle.on('mouseout', function() {
log('mouseout green circle');
//console.log(this);
group.on('mouseover', function() {
log('mouseover group');
});
group.on('mouseout', function() {
log('mouseout group');
});
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
name: 'red'
});
var greenCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 40,
strokeWidth: 4,
fill: 'green',
stroke: 'black',
name: 'green'
});
group.add(redCircle);