jQuery HTML click event firing twice

Question

I have a custom select menu button, and I have bound to the html click event to close it. But the event is firing twice.

http://jsfiddle.net/GnzBj/1/

$(function () {
    $('html').click(function () {
        console.log('html');
    });
});

Any one know why/how to prevent it firing twice?

Answer 1

The reason why the event is triggered twice is because you have the whole UI inside a label.

<div  ...>
    <label for="xmod-form-51183d51afa3d" ... >
        <select name="theme" id="xmod-form-51183d51afa3d" ...>
            ...
        </select>
        ...
    </label>
</div>

Clicking on the label will also trigger a click event on the form element it relates to.

If you remove the label element, it works as expected: http://jsfiddle.net/GnzBj/5/.

In case you need the label, let it contain as few as possible of the UI, but clicking on it will still trigger two events.