How do I disable the click handler on a YUI Node?

Question

I am wanting to be able to disable the click functionality of a radio button so I can uncheck it.

However, when I uncheck it, the click still fires and the end result is a radio that unselects (and modifies other page elements accordingly), and then re-checks because of the onclick event.

    var clickFunction = function(e, radio, p){
        var checked = radio.get("checked");
        radio.set("checked", !checked);
    };
    this.controlNode = Y.Node.create("<input id='" + id + "' onclick='function(e){return false;}' type='radio' name='" + parent.id + "'>");
    this.label = Y.Node.create("<label for='" + id + "'>" + display + "</label>");
    Y.on("mousedown", clickFunction, this.label, this.controlNode, parent.controlNode);
    parent.controlNode.appendChild(this.controlNode);
    parent.controlNode.appendChild(this.label);

The mousedown event handler is used, as it's for fat fingers on a (windows) touch screen, and movement between mousedown and mouseup does not constitute a click. (Throughout a tap with a finger, the finger will increase and decrease it's surface area on the screen, and a non-multitouch screen put the cursor at the average of the contact points. A slight roll will move the cursor).

The mouse down bubbles up, and results in dependency evaluation and show/hiding other controls on a page.

I simply want undo; and I think that having another reset option is less than satisfactory for my particular use. If nothing else eventuates here, I shall have to use that.

Answer 1

Try the halt method on the event facade passed to your event handler:

this.controlNode = Y.Node.create("<input id='" + id + "' type='radio' name='" + parent.id + "'>");
this.controlNode.on("click", function(e) { e.halt(); });

This will stop the event propagating and the default event behaviour (the click).