I've encountered this question before, but unfortunately none of the solutions provided have worked for me.
Some things I've attempted are:
- Using event.preventDefault() - did not produce the desired result.
- Removing user-select from CSS - not practical as users should still be able to select text.
- Attempting to remove selection on ctrl+click event - there is a delay and it only works after mouseup.
An example of what I've tried is shown below:
document.body.querySelector('tbody').addEventListener('click', e => {
e.preventDefault();
if (e.target.tagName === 'TD') {
if(e.ctrlKey){
//Select row logic here
if (document.selection){
document.selection.empty();
}else if (window.getSelection){
window.getSelection().removeAllRanges();
}
}
}
})
You can view this example in action at: http://jsfiddle.net/ppgab/zm1dgt3s/5/
This issue becomes particularly frustrating when the user clicks "between" table cells, resulting in the selection of all cells.
I am seeking an elegant solution to this problem. Please note that I prefer solutions without JQuery.