快速按钮单击导致选择按钮下方的字段

Question

我试图创建一个滑块使用jQuery，但我有一些新手问题。 我做了一个动态插入的按钮和一个动态插入的支架。当我点击此按钮的速度超过2秒时，它会选择按钮后面的支架区域。

我的HTML：

<div id="slidingmenu"> 
    <img src="http://www.hayvansevgisi.net/resimler/wallpaper/ceylan-1.jpg" alt="main1.png" /> 
    <img src="http://www.belgeselizlesek.com/wp-content/uploads/hayvanlar-resimi-4.jpeg" alt="main2.png" /> 
    <img src="http://img03.blogcu.com/v2/images/orj/h/a/y/hayvanlaralemi/hayvanlaralemi_13323141966.jpg" alt="main3.png" /> 
    <img src="http://img03.blogcu.com/v2/images/orj/h/a/y/hayvanlaralemi/hayvanlaralemi_1333958876147.jpg" alt="main4.png" /> 
    <img src="http://www.hayvansevgisi.net/resimler/wallpaper/kus-1503.jpg" alt="main5.png" /> 
    <img src="http://ipekbozbay.files.wordpress.com/2011/04/hayvanlar0034qm5.jpg" alt="main6.png" /> 
    <img src="http://g.mynet.com/i/42/122715-hayvanlar-noel---13.jpg" alt="main7.png" /> 
    <img src="http://elmusavvir.files.wordpress.com/2008/10/koala-doga-canli-agac-resim-hayvanlar.jpg" alt="main8.png" /> 
    <img src="http://www.herseyebedel.com/wp-content/uploads/2012/09/Hayvanlar-Duvar-Ka%C4%9F%C4%B1tlar%C4%B1-25.jpg" alt="main9.png" /> 
    <img src="http://www.hayvanresim.com/wp-content/uploads/Memeli-hayvanlar-7.jpeg" alt="main10.png" /> 
</div> 

的CSS：

#slidingmenu { 
    width: 380px; 
    height: 225px; 
} 

我如何使用它：

$(document).ready(function() { 
    $('#slidingmenu').bslider(); 
}); 

我的新手功能：

; (function() { 
    // Main function 
    $.fn.bslider = function() { 
     // Static 
     var i = 0, 
      img = "", 
      here = 0, 
      result = 0, 
      butwidth = 45, 
      interval = 5000, 
      loc = new Array([]), 
      mywidth = this.width(), 
      myheight = this.height(), 
      count = this.children('img').length, 
      midwidth = mywidth * count, 
      urlLeft = 'http://img842.imageshack.us/img842/613/arrowleftr.png', 
      urlRight = 'http://img7.imageshack.us/img7/4593/arrowrightq.png'; 
     // Cache Images and calgulate locations first 
     for (i = 0; i < count; i++) { 
      // Cache Images 
      var elem = this.children('img').eq(i); 
      img = img + '<img src="' + elem.attr('src') + '" alt="' + elem.attr('alt') + '" />'; 
      // Calgulate locations 
      loc[i] = result; 
      result = result - mywidth; 
     } 
     // Clean 
     this.empty(); 
     // Slider 
     var obj = this.addClass("bslider").css({ 
      padding: 0, 
      width: mywidth, 
      height: myheight, 
      margin: '20px auto', 
      borderRadius: '20px 20px 20px 20px' 
     }); 
     // Append Image container 
     var mid = $('<div class="mid"></div>').appendTo(obj).css({ 
      padding: 0, 
      width: mywidth, 
      height: myheight, 
      overflow: 'hidden', 
      position: 'absolute', 
      display: 'inline-block', 
      zIndex: 0 
     }); 
     $('<div class="container">' + img + '</div>').appendTo(mid).css({ 
      padding: 0, 
      width: midwidth, 
      height: myheight, 
      position: 'relative', 
      display: 'inline-block', 
      zIndex: -1 
     }).children('img').css({ 
      width: mywidth, 
      height: myheight, 
      float: 'left', 
      clear: 'none' 
     }); 
     // Append Left button 
     $('<div class="left"></div>').insertBefore(mid).css({ 
      float: 'left', 
      clear: 'none', 
      display: 'block', 
      position: 'absolute', 
      zIndex: 1, 
      margin: 0, 
      opacity: 0, 
      width: butwidth, 
      height: myheight, 
      cursor: 'pointer', 
      background: 'url(' + urlLeft + ') no-repeat left center' 
     }).hover(function() { 
      $(this).animate({ opacity: 0.6 }, 'fast'); 
     }).mouseleave(function() { 
      $(this).animate({ opacity: 0 }, 'fast'); 
     }).click(function (e) { 
      e.preventDefault(); 
      if (here > 0) { here--; } else { here = count - 1; } 
      $('.mid .container').animate({ left: loc[here] }, 'fast'); 
     }); 
     // Append Right button 
     $('<div class="right"></div>').insertBefore(mid).css({ 
      float: 'right', 
      clear: 'none', 
      display: 'inline', 
      position: 'relative', 
      zIndex: 1, 
      margin: 0, 
      opacity: 0, 
      width: butwidth, 
      height: myheight, 
      cursor: 'pointer', 
      background: 'url(' + urlRight + ') no-repeat right center' 
     }).hover(function() { 
      $(this).animate({ opacity: 0.6 }, 'fast'); 
     }).mouseleave(function() { 
      $(this).animate({ opacity: 0 }, 'fast'); 
     }).click(function (e) { 
      e.preventDefault(); 
      if (here < count - 1) { here++; } else { here = 0; } 
      $('.mid .container').animate({ left: loc[here] }, 'fast'); 
     }); 
     // Default behavior 
     function doIt() { obj.find('.right').click(); } 
     var int = setInterval(doIt, interval); 
     // Allow chain 
     return obj; 
    }; 
}()); 

如何停止在此字段上的选择？

拨弄：http://jsfiddle.net/BerkerYuceer/yTWnN/

Answer 1

我假设一个“黑客”将清除使用合适的回调（例如onSlideAfter）文件选择。例如： -

window.getSelection().removeAllRanges(); 

编辑 - 这里有一个更多的跨浏览器的方式：

function clearSelection() { 
    var sel; 
    if(document.selection && document.selection.empty) { 
     document.selection.empty(); 
    } else if(window.getSelection) { 
     sel = window.getSelection(); 
     if(sel.empty) sel.empty(); 
     if(sel.removeAllRanges) sel.removeAllRanges(); 
    } 
} 

来源：http://upshots.org/javascript/javascript-cross-browser-clear-selection

Answer 2

您可以使用CSS停止选择。

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 

How to disable text selection highlighting using CSS?