Mootools: How to Disallow `mouseenter` and `mouseleave` event when checkbox checked?

Question

Mootools: How to disallow mouseenter and mouseleave event when checkbox checked?

window.addEvent('domready',function() {
    var z = 2;
    var e = document.id('draggable');
    var drag = new Drag.Move(e, {
        grid: false,
        preventDefault: true,
        onStart: function() {
            e.setStyle('z-index',z++);
        }
    });
    //e.store('Drag', drag);

    var w = e.getStyle('width');
    var h = e.getStyle('height');
     e.set("morph", {duration:700,delay:400}).addEvents({
        mouseenter: function(){
            this.store("timer", (function() {
                this.morph({
                    width: '700px',
                    height: '500px',
                    opacity: [0.5, 1]
                });
            }).delay(1000, this));
        },
        mouseleave: function() {
           var pin = this.store("timerB", (function() { //probably there is some missateke
                this.morph({
                    width: w,
                    height: h,
                    opacity: [1, 0.5]
                });
            }).delay(1000, this));
            $clear(this.retrieve("timer"));
        }
    });

});

function check(elem) {
    var pin = document.id('draggable').retrieve('timerB');

    if(elem.checked) {
        pin.detach();
    }
    else {
        pin.attach();
    }
}
#draggable{
    background-color: grey;
    width: 300px;
    height: 200px;
    opacity: 0.5;
}​
​<input type="checkbox" onclick="check(this);">
<div id="draggable">Draggable DIV 1</div>

The code paste in http://jsfiddle.net/89RJp/4/

Answer 1

http://jsfiddle.net/89RJp/6/

you want if (element.get("checked")) return at the top of the mouseenter/mouseleave callbacks.