單擊`img`源時，文本選擇不會清除

Question

我有一個容器，里面有孩子。 其中一個孩子中有text 。 另一個有img 。

問題是，當用戶選擇text （使用鼠標，就像在word doc中選擇文本一樣），假定用戶單擊圖像源（已占據父對象），則text不會清除。

文字會一直保持selection直到我從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> 

誰能幫我解決這個問題？ 如果在css或html有解決方案，可能我想避免使用js函數。

如果我使用此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> 

Answer 2

也許這很愚蠢，但我不明白為什么您不能在.imageHolder上附加此事件？

 $('.imageHolder').on('click', function(e) { if (window.getSelection.empty) { // Chrome window.getSelection().empty(); } else if (window.getSelection().removeAllRanges) { // Firefox window.getSelection().removeAllRanges(); } else if (document.selection) { // IE? document.selection.empty(); } }); 

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

 <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>