Событие ondblclick

Element: dblclick event

The dblclick event fires when a pointing device button (such as a mouse’s primary button) is double-clicked; that is, when it’s rapidly clicked twice on a single element within a very short span of time.

dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup events).

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("dblclick", (event) => >); ondblclick = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .

Examples

JavaScript

const card = document.querySelector("aside"); card.addEventListener("dblclick", (e) =>  card.classList.toggle("large"); >); 

HTML

aside> h3>My Cardh3> p>Double click to resize this object.p> aside> 

CSS

aside  background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(0.9); transform-origin: 0 0; transition: transform 0.6s; user-select: none; > .large  transform: scale(1.3); > 

Result

Specifications

Источник

Событие ondblclick

Событие ondblclick возникает при двойном щелчке левой кнопкой мыши на элементе.

Синтаксис

Значения

Значение по умолчанию

Применяется к тегам

Пример

        
Дважды щелкните в этом поле для изменения цвета фона.
  

В данном примере при двойном щелчке мышью внутри слоя, фон слоя меняет свой цвет с серого на оранжевый и наоборот.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Двойной клик для css

Last updated: May 25, 2023
Reading time · 4 min

# Table of Contents

# Disable text selection on Double-click using CSS

If you need to disable text selection on double-click using CSS, set the element’s user-select CSS property to none .

When the user-select property is set to none , the text of the element and its sub-elements is not selectable.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> .text  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; > style> head> body> h2 class="text">bobbyhadz.comh2> p class="text">Website: bobbyhadz.comp> body> html> 

We set the class attribute on the two elements to text and used the class to set the user-select CSS property to none .

When the property is set to none , the text of the element and its sub-elements is not selectable.

You can also set user-select to none on multiple elements by wrapping them with a div tag.

Copied! 
div style="user-select: none;"> h2>bobbyhadz.comh2> p>Website: bobbyhadz.comp> div> 

The example uses an inline style tag, however, you can also use an external .css file.

Here is the updated index.html .

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> link rel="stylesheet" href="style.css" /> head> body> h2 class="text">bobbyhadz.comh2> p class="text">Website: bobbyhadz.comp> body> html> 

And here is the code for the style.css file.

Copied! 
.text  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; > 

The CSS properties set user-select to none for all browsers.

# Disable text selection on Double-click using JavaScript

To disable text selection on double-click using JavaScript:

1. Set a dblclick event listener on the element.
2. Check if there is selected text in the event handler function.
3. If the condition is met, remove the selection.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2 class="text">bobbyhadz.comh2> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const paragraph = document.querySelector('.text'); paragraph.addEventListener('dblclick', event =>  console.log('double-click event triggered'); if (document.selection && document.selection.empty)  document.selection.empty(); > else if (window.getSelection)  const selection = window.getSelection(); selection.removeAllRanges(); > >); 

The dblclick event is triggered when the user’s pointing device button is double-clicked.

In the event handler function, we check if there is a selection and clear it.

Copied! 
paragraph.addEventListener('dblclick', event =>  console.log('double-click event triggered'); if (document.selection && document.selection.empty)  document.selection.empty(); > else if (window.getSelection)  const selection = window.getSelection(); selection.removeAllRanges(); > >); 

The selection.empty and selection.removeAllRanges methods remove all ranges from the selection.

# Disable text selection on Double-click using event.detail

You can also use the event.detail property to disable text selection on double click.

If the property returns a value greater than 1 , then the user clicked multiple times.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2 class="text">bobbyhadz.comh2> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const paragraph = document.querySelector('.text'); paragraph.addEventListener('mousedown', event =>  if (event.detail > 1)  event.preventDefault(); > >); 

We added a mousedown event listener to the paragraph.

The mousedown event is triggered at an element when the user’s pointing device button is pressed while it’s inside the element.

When the user clicks on the element, we check if they clicked more than once, in which case we prevent the default action (text selection) with the event.preventDefault() method.

The example above only disables text selection on double-click for the specific element.

If you need to disable text selection on double-click for all elements, set the event listener on the document.body element.

Copied! 
document.body.addEventListener('mousedown', event =>  if (event.detail > 1)  event.preventDefault(); > >); 

Note that the user can still select the element’s text with a single click, however, they can’t select the element’s text with a double-click.

If you want to prevent the user from selecting the element’s text with a single or double-click, remove the if statement.

Copied! 
const paragraph = document.querySelector('.text'); paragraph.addEventListener('mousedown', event =>  event.preventDefault(); >); 

The example prevents the user from selecting the element’s text with a single and double-click.

If you want to apply this to all elements in the document, add the mousedown event listener to the document.body element.

Copied! 
document.body.addEventListener('mousedown', event =>  event.preventDefault(); >); 

# Disable text selection on Double-click using onselectstart

You can also set the onselectstart property to a function that returns false straight away to disable text selection on double-click.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2 class="text">bobbyhadz.comh2> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const paragraph = document.querySelector('.text'); paragraph.onselectstart = function handleSelectStart()  return false; >; 

You can also set the event listener for all elements in the document.

Copied! 
document.body.onselectstart = function handleSelectStart()  return false; >; 

You can also use the addEventListener() method to add an event listener for the selectstart event.

Copied! 
const paragraph = document.querySelector('.text'); paragraph.addEventListener('selectstart', event =>  event.preventDefault(); >); 

The event listener can also be set on the document.body element if you need to disable text selection on double-click for all elements in the document.

Copied! 
document.body.addEventListener('selectstart', event =>  event.preventDefault(); >); 

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник