Question

HTML

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

问题

如何在＆lt; button＆gt;之后添加复选框？通过按住左键单击？..然后在左键单击释放时停止添加...

到目前为止我已经尝试了，

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

Answer 1

mousedown没有自动重复功能，但您可以通过setInterval创建一个，然后通过mouseup在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">');
        }
    }
});

请务必测试您的目标浏览器，我不会 100％某些人不会在按钮上吃mousedown和mouseup。

修改向jAndy喊出关于mouseleave的点，编辑上述内容以使用它。

Answer 2

试试这个：

$(document).ready(function(){
   var checkInterval;
   $('button').mousedown(function(){
     var me=this;                              // store 'this' button
     checkInterval=setInterval(function() {
       $(me).after('<input type="checkbox">'); // add checkbox after button...
     }, 200);                                  // ...every 200ms on mousedown
   }).bind('mouseup mouseleave', function() {  // bind on mouseup or mouseleave
     clearInterval(checkInterval);             // stop adding checkboxes
   });
});

左键单击+ hold = add复选框

2 个答案: