nvm, i found it. The event is on the container and the mouse is over the marquee so the event breaks.
On Aug 7, 9:49 am, TheIvIaxx <[email protected]> wrote: > Below is my code sample. Clicking creates the marquee and it kinda > work, but not 100% as expected. My main problem is that the mouseup > event is not being fired at all. Am i using the events incorrectly? > > <!DOCTYPE html> > <html> > <head> > <title></title> > <script type='text/javascript' src='mootoolsCore.yc.js'></script> > <script type='text/javascript'> > var g; > var Marquee = new Class({ > initialize: function() { > this.container = new Element('div', {'style':'width: > 800px;height:800px;background:#ccc;'}).inject(document.body); > this.isMouseDown = false; > > this.container.addEvent('mousedown', > this._down.bindWithEvent(this)); > this.container.addEvent('mousemove', > this._drag.bindWithEvent(this)); > this.container.addEvent('mouseup', > this._up.bindWithEvent(this)); > }, > _up: function(e) { > e.preventDefault(); > alert('up'); > if (this.isMouseDown) { > $$('#dragMarquee').each(function(item) { > item.destroy(); > }); > } > this.isMouseDown = false; > }, > _down: function(e) { > e.preventDefault(); > this.isMouseDown = true; > marq = new Element('div', {id:'dragMarquee'}).inject > (document.body); > marq.setStyles({ > position:'absolute', > border:'1px solid #3399ff', > background:'#aaa', > width:100, > height:100, > top: e.page.y, > left: e.page.x, > 'zIndex':2000 > }) > }, > _drag: function(e) { > e.preventDefault(); > marq = $('dragMarquee'); > if (this.isMouseDown) { > h = e.page.y - parseInt(marq.getStyle('top')); > w = e.page.x - parseInt(marq.getStyle('left')); > marq.setStyles({ > height:h, > width:w > }) > this.log('x') > } > else { > marq.destroy(); > } > } > }) > window.addEvent('domready', function() { > g = new Marquee(); > }) > </script> > </head> > <body> > > </body> > </html>
