Eliminate the standard blue border that appears when control-clicking on table elements

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.

Answer №1

After some trial and error, I realized that the correct event to use was actually mousedown:

table.addEventListener('mousedown', e => {
    if(e.ctrlKey){
        e.preventDefault();
    }
})

Answer №2

Have you experimented with CSS for this?

div#myDiv:active{
    text-decoration: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue Encountered While Attempting to Show a Div Element within a Function

Check out this HTML code snippet: <div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center">Step 1</div> And here is the corresponding Script: function onStepClicked() { var elem = document.getElementById(&apo ...

When using Mongoose paginate, there is always one missing document

I currently have a database with 6 documents and the following route: router.get('', async (req, res) => { const search = req.query.search !=null ? req.query.search : ""; const page = req.query.page !=null ? req.query.page : 1; const limit = ...

Updating information within AngularJS select boxes

On my page, I have 3 select boxes. When a user selects an option in the first select box, I want the options in the second select box to update based on the value selected in the first one. Similarly, I want the options in the third select box to change w ...

Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer <div class="note"> <div class="header">Title</div> <div class="content" contenteditable="true">Some content</div> <div class="fo ...

varied reactions between componentDidMount and useEffect when employing jquery emoji plugin

Currently, I am facing an issue with a jquery emoji plugin that I need to use on one of my components until I complete building a custom plugin. Interestingly, when I call the emoji plugin inside componentDidMount, everything works fine, except for the ab ...

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

I attempted to create a button with the id of "clickme" that links to index.html and js/buttonexample.js. Although I could see the button on both the browser and android emulator, it wasn't functioning as expected when clicked. js/buttonexample.js d ...

Querying for the presence of an ObjectId in an array in Mongoose

I'm developing a Node.js project that involves two models: User and Project. Below is the Schema for the Project model: const ProjectSchema = new mongoose.Schema({ name: { type: String, maxlength: 50, required: true, } ...

Do matrix filters in IE7 take into account white space sensitivity?

Utilizing CSS transformations, I am reverting to the following Matrix transform specifically for IE7 and IE8. filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand') This method function ...

Trouble with ng-repeat when working with nested json data

Check out this app demo: http://jsfiddle.net/TR4WC/2/ I feel like I might be overlooking something. I had to loop twice to access the 2nd array. <li ng-repeat="order in orders"> <span ng-repeat="sales in order.sales> {{sales.sales ...

AngularJS: resolving route dependencies

I have a variable $scope.question that contains all the questions for the page. My goal is to loop through the questions page by page. To achieve this, I created a function called questionsCtrl and I am calling this function in the config while setting up ...

Navigating from Page 1 to Page 2 and then returning to Page 1 using the browser's back button causes Page 1 to malfunction in NextJS version 13

I am currently using next version 13.4.5 and implementing routing with typescript through /app. On my first page, I have a <Link> (next/link) element that takes me to Page 2. However, when I use the browser back button to return to page 1, the layou ...

Several different factors

I need to develop a form that allows users to edit existing comments. The form will display a textarea containing the old comment text and a submit button. My goal is to send the newComment data via ajax to another script. However, I am facing an issue w ...

Adding an image within the body of text in a Django model, where both the text and image coexist

I am currently seeking a method to seamlessly insert an image within the text of my Django-powered blog. My goal is to achieve a layout similar to the one showcased in this example: https://i.stack.imgur.com/cFKgG.png The desired layout consists of two c ...

Unit testing controllers in AngularJS with Karma often involves setting up mock services to simulate dependencies

Currently, I am immersed in the development of a Single Page Application using AngularJS as part of my Treehouse Full Stack JavaScript TechDegree. My main focus right now is on conducting unit tests for the controllers. The challenge lies in testing contro ...

JavaScript - Dynamic rotation algorithm

I recently developed a piece of code to manage object rotation in a THREE.js environment. Although the issue is not specific to 3D. My goal is to have my object (referred to as 'this') rotate by 0.25 radians each time a function is called, until ...

The Document.querySelector() method is not displaying every element

As a beginner, I am currently exploring the world of relative CSS selectors and JSPath for my automation scripts. During my journey, I noticed that there are differences in the return statements between these two methods. Below is an example demonstrating ...

Tips for utilizing a Map instance in JSX?

Is there a more efficient method for iterating over a Map object in JSX? const map = new Map<string, string[]>([ '2023-08-23': ['string1', 'string2'], '2023-08-24': ['string3', 'string4' ...

Tips for ensuring the Search button always remains alongside the input bar during resizing with percentages

I've been trying to figure out why the search button is still showing at the bottom left and creating an "l" shape even though I'm using style="overflow: hidden; padding-right: .5em;". Does anyone have any ideas as to what might be causing this i ...

streamlined method for accessing page parameters in nested components using the next.js application router

In my next.js application, I have a deep hierarchy of nested components. I currently use the params.lang parameter for translations, but I find myself passing it down to every nested component. Although there are hooks available, I prefer rendering them ...