Javascript 双击一个元素时，会选择另一个元素

我已经用html/css/js编写了一个图像滚动条，一个非常简单的滚动条：点击右键，我浏览“holder”-div中的所有图像，并在使用classname=“current”的图像之后更改图像的类

但我认为这不是问题所在。每当我连续单击左侧或右侧按钮时，就会选中div中的图像（蓝色选择框）。如果我连续单击左按钮，甚至它上面的文本也会被选中

<div class="grid_4 omega image_box">
    <div id="txt_choose" class="image_txt">
        this is helpful text
    </div>
    <div id="alt_spacer"></div>
    <div id="image_content" class="image_content" onclick="chooseImageType(this)">
        <div id="current" class="current"><img src="images/default1.png" /></div>
        <div id="current" class="hidden"><img src="images/default2.png" /></div>
    </div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>

根据请求，我的javascript：

function showNext()
{
//vars
var shown = false;
var current;

$('#image_content > div').each(function()
{
    if($(this).attr('class') == "current")
    {
        current = $(this);
        shown   = true;
    }
    else if($(this).attr('class') == "hidden" && shown == true)
    {
        current.hide();
        current.attr('class', 'prev');
        current.attr('id', '');
        $(this).show();
        $(this).attr('class', 'current');
        $(this).attr('id', 'current');
        shown = false;
    }
});
}

是否有任何方法可以停止像这样选择上面的图像和文本（而实际上不使它们不可选择）？

---

这可能是因为按钮的相对位置和它们的z索引？

这在你的JS小提琴中起作用

function showNext()
{

    //vars
    var shown = false;
    var current;
    window.getSelection().removeAllRanges();
   $('#image_content > div').each(function()
    {
        if($(this).attr('class') == "current")
        {
            current = $(this);
            shown   = true;
        }
        else if($(this).attr('class') == "hidden" && shown == true)
        {
            current.hide();
            current.attr('class', 'prev');
            current.attr('id', '');
            $(this).show();
            $(this).attr('class', 'current');
            $(this).attr('id', 'current');
            shown = false;
        }
    });
}

function showPrev()
{
window.getSelection().removeAllRanges();
    //vars
    var prev_present = false;
    var prev;

    $('#image_content > div').each(function()
    {
        if($(this).attr('class') == "prev")
        {
            prev         = $(this);
            prev_present = true;
        }
        else if($(this).attr('class') == "current" && prev_present == true)
        {
            $(this).hide();
            $(this).attr('class', 'hidden');
            $(this).attr('id', '');
            prev.show();
            prev.attr('class', 'current');
            prev.attr('id', 'current');
            prev_present = false;
        }
    });
}

致意

---

乔纳斯

我找到了答案，而且答案非常简单

我只需要将这些按钮包装到另一个div中，这样它们就比html的其他部分更容易使用了

像这样：

<div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>

你也可以发布你的javascript吗？我已经添加了我的javascript。你可以使用jsfiddle.net了解一下你的做法吗。很高兴：我添加了你的代码，但这不是我想要的。这让我无法选择文本，这对访问者来说非常烦人。这并没有解决我的问题。如果你想用我在原始问题帖子的评论中发布的JSFIDLE试试，现在就试试吧。这就是你要找的吗？我做这件事时无法创建JSFIDLE帐户，所以我想我看不到任何更改..：你到底做了什么？粘贴我的代码而不使用$（document）.mousemove（function（）{and}）；在你的“点击”处理程序中。我知道你试图做什么，试着在你点击按钮后禁用选择。但它工作得太晚了一点，在取消全部选择之前，它仍会选择它半秒钟\

<div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>