jQuery MultiClick on Element

by Alvin Olavarrieta

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child"> <span class="subchild"></span>

        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>
<input value="100" />
<input value="50" />
<p>Lol</p>
<li id="a"></li>
<li id="b"></li>
<li id="c"></li>

JavaScript

jQuery.event.special.multiclick = {
    delegateType: "click",
    bindType: "click",
    handle: function (event) {
        var handleObj = event.handleObj;
        var targetData = jQuery.data(event.target);
        var ret = null;
        // If a multiple of the click count, run the handler
        targetData.clicks = (targetData.clicks || 0) + 1;

        if (targetData.clicks % event.data.clicks === 0) {
            event.type = handleObj.origType;
            ret = handleObj.handler.apply(this, arguments);
            event.type = handleObj.type;
            return ret;
        }
    }
};

// Sample usage
$("p").on("multiclick", {
    clicks: 3
}, function (event) {
    alert("clicked 3 times");
});

$('input').val(function (index, value) {
    return value + '%'
})

var arr = [{
    id: "a",
    tagName: "li"
}, {
    id: "b",
    tagName: "li"
}, {
    id: "c",
    tagName: "li"
}];


// Returns [ "a", "b", "c" ]
var liMap = $("li").map(function (index, element) {
    return element.id;
}).get();

// Also returns ["a", "b", "c"]
// Note that the value comes first with $.map
var regularMap = $.map(arr, function (value, index) {
    return value.id;
});

console.group('LI Map');
console.log(liMap);
console.groupEnd();
console.group('Regular Map');
console.log(regularMap);
console.groupEnd();