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

您可以使用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?

Answer 2

我认为“黑客”是使用合适的回调清除文档选择（例如onSlideAfter）。 E.g：

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

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

2 个答案: