单击`img`源时，文本选择不会清除

Question

I have a container, and it has children within. one of the children has the text in it. another has the img in it.

the problem is, when user select the text (using mouse, just like selecting text in word doc etc), assume that, the user click on the image source (which is occupied the parent), the text not clearning.

the text keeps selection up to i click out of img source. how to fix this issue.

I require, even if the user clicks on img the selection need to cleared.

 $('.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> 

Can any one help me to solve this? possibly I would like to avoid js function, in case if there is a solution in css or html .

In case if i use this js function, i am not able to select the text at all..

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

jsfiddle

Answer 1

Try the Following.

 $('.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

Maybe this is stupid but I don't understand why you can't attach this event on the .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>