javascript - 单击 `img` 源时文本选择不清除

Question

我有一个容器，里面有 child 。其中一个子项中有 text。另一个里面有 img。

问题是，当用户选择 text(使用鼠标，就像在 word doc 等中选择文本一样)时，假设用户单击图像源(占用父级) , text 未清除。

文本保持选择直到我点击img源。如何解决这个问题。

我要求，即使用户点击 img 也需要清除选择。

$('.container').on('click', function (e) {
    var target = $(e.target);
    //window.getSelection().empty(); i can't use this.
    console.log(target); //getting img.
});

.container{
    border:1px solid green;
    width:300px;
    height:150px;
    position:relative;
}
.imageHolder{
    position:absolute;
    left:0;
    top:0;
}

.textHolder {
    position:absolute;
}

<div class="container">
    <div class="imageHolder"><img src="http://thumb7.shutterstock.com/display_pic_with_logo/599431/127612211/stock-photo-green-apple-isolated-on-white-background-127612211.jpg" width=300 height=150></div>
    <div class="textHolder">some text goes here</div>
</div>

谁能帮我解决这个问题？可能我想避免使用js 函数，以防css 或html 中有解决方案。

如果我使用这个 js 函数，我根本无法选择 text..

if (window.getSelection) window.getSelection().removeAllRanges();
    else if (document.selection) document.selection.empty();

jsfiddle

Answer 1

尝试以下操作。

$('.container').on('click', function (e) {
    var target = $(e.target);
    //window.getSelection().empty(); i can't use this.
    //console.log(target); //getting img.
  var txt=$(this).find(".textHolder");
  if(target[0].tagName === 'IMG')
    {
      
      txt.addClass('noselect');
      txt.attr('unselectable','on');
      
            
    }else{
      txt.removeClass('noselect');
      txt.attr('unselectable','off');
    }
});

$('.container .textHolder').on('mousedown',function(){
  $(this).removeClass('noselect');
  $(this).attr('unselectable','off');
});

.container{
    border:1px solid green;
    width:300px;
    height:150px;
    position:relative;
}
.imageHolder{
    position:absolute;
    left:0;
    top:0;
}

.textHolder {
    position:absolute;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="imageHolder"><img src="http://thumb7.shutterstock.com/display_pic_with_logo/599431/127612211/stock-photo-green-apple-isolated-on-white-background-127612211.jpg" width=300 height=150></div>
    <div class="textHolder">some text goes here</div>
</div>