Question

html

  <button>a</button>
  <div class="headerer">
     <p>visit <a href="http://reigel-codes.co.cc">reigel-codes.co.cc</a></p>
  </div>

problem

how can I add checkbox after <button> by pressing and hold left click ?.. then stop adding when left click is release…

I have tried so far,

$(document).ready(function(){
   $('button').mousedown(function(){
    $(this).after('<input type="checkbox">')
  });
})

Answer 1

mousedown doesn’t have an automatic repeat, but you could create one via setInterval and then turn it off on mouseup via clearInterval. E.g.:

$(document).ready(function(){
    var addHandle, addTarget;

    addHandle = 0;

    $('button')
        .mousedown(function(){
            if (!addHandle) {
                addTarget = $(this);
                addHandle = setInterval(doTheAdd, 250); // Or whatever interval you want
            }
        })
        .bind('mouseup mouseleave', (function(){
            if (addHandle) {
                clearInterval(addHandle);
                addHandle = 0;
                addTarget = undefined;
            }
        });

    function doTheAdd() {
        if (addTarget) {
            addTarget.after('<input type="checkbox">');
        }
    }
});

Be sure to test your target browsers, I wouldn’t be 100% certain some of them don’t eat mousedown and mouseup on buttons.

Edit Shout out to jAndy for the point about mouseleave, edited the above to use it.