Button on touch css

How to set :active style to button in mobile

How to set :active style to button in mobile ?
if you set touchstart and touchend eventListener and switch class (e.g. .active) to button you are happy 🙂
I’ll tell you easier way.

CSS

css is normal. you set :hover , :forcus , and :active Pseudo-classes.

.btn  background-color: blue; > .btn:hover  background-color: red; > .btn:focus  background-color: green; > .btn:active  background-color: gray; > 

Javascript

There are a trick. You should set empty function to touchstart event in body like this.

window.onload = function()  if(/iP(hone|ad)/.test(window.navigator.userAgent))  document.body.addEventListener('touchstart', function() >, false); > > 

Demo

Result

please tell me android chrome result . I don’t have it.

Best plactice

Desktop

match :hover and :focus style.

$hover: red  .btn  background-color: blue; > .btn:hover  background-color: $hover; > .btn:focus  background-color: $hover; > .btn:active  background-color: gray; > 

mobile

Reference

Источник

touch-action

The touch-action CSS property sets how an element’s region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* Global values */ touch-action: inherit; touch-action: initial; touch-action: revert; touch-action: revert-layer; touch-action: unset; 

By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch events disable the browser handling of gestures by calling preventDefault() , but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element’s descendants.

Note: After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.

Syntax

The touch-action property may be specified as either:

• One of the keywords auto , none , manipulation , or
• One of the keywords pan-x , pan-left , pan-right , and/or one of the keywords pan-y , pan-up , pan-down , plus optionally the keyword pinch-zoom .

Values

Enable browser handling of all panning and zooming gestures.

Disable browser handling of all panning and zooming gestures.

Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.

Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for «pan-x pan-y pinch-zoom» (which, for compatibility, is itself still valid).

pan-left , pan-right , pan-up , pan-down Experimental

Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling «up» (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, «pan-left pan-right» is invalid since «pan-x» is simpler, but «pan-left pan-down» is valid).

Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.

Accessibility concerns

A declaration of touch-action: none; may inhibit operating a browser’s zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.

Formal definition

Initial value	auto
Applies to	all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
Inherited	no
Computed value	as specified
Animation type	Not animatable

Formal syntax

touch-action =
auto |
none |
[ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] |
manipulation

Examples

Disabling all gestures

The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.

HTML

CSS

#map  height: 150vh; width: 70vw; background: linear-gradient(blue, green); touch-action: none; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Свойство touch-action CSS

От автора: свойство touch-action CSS определяет, может ли пользователь взаимодействовать с элементом на экране с помощью касаний, используя стандартные возможности браузера, а также как это будет происходить. Например, панорамирование и зум.

События касаний – это Web API, позволяющее браузеру интерпретировать действия пальцами или стилусом на сенсорном экране или трекпаде. Обычно события касаний мы обрабатываем через JS, однако touch-action позволяет информировать браузер о намерениях приложения еще до срабатывания обработчиков событий.

Результат касания элемента зависит от значения свойства touch-action и стандартных настроек касания элемента и его предков. Разработчики могут выборочно отключать стандартное поведение при касании экрана, предотвращая тем самым отправку, если поведение не требуется.

Свойство touch-action применяется только к элементам, которые поддерживают оба CSS-свойства width и height. Элементам без явно прописанных размеров типа span можно задать свойство display в значение, поддерживающее width и height, например, block.

Синтаксис

Синтаксис: touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Изначально: auto

Применяется к: всем элементам кроме: незаменяемых инлайновых элементов, строк таблиц, групп строк, колонок таблиц и групп колонок

Анимируется: нет

Значения

auto. Значение по умолчанию. Браузер пользователя может определить разрешенное поведение при касании элемента.

manipulation. На элементе разрешено панорамирование и зум пальцами. Можно считать сокращением для pan-x pan-y pinch-zoom. Дополнительные нестандартные жесты типа двойного тапа запрещены.

none. На элементе запрещены стандартные поведения при касании.

pan-x. Разрешено панорамирование пальцами по оси Х. Можно совместить с pan-y, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.

pan-y. Разрешено панорамирование пальцами по оси Y. Можно совместить с pan-x, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.

pan-left. Панорамирование пальцами разрешено только, если действие начинается с панорамирования влево. То есть пользователь перемещает палец вправо. После начала прокрутки направление можно изменить на противоположное.

pan-right. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вправо. То есть пользователь перемещает палец влево. После начала прокрутки направление можно изменить на противоположное.

pan-up. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вверх. То есть пользователь перемещает палец вниз. После начала прокрутки направление можно изменить на противоположное.

pan-down. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вниз. То есть пользователь перемещает палец вверх. После начала прокрутки направление можно изменить на противоположное.

pinch-zoom. Разрешен зум несколькими пальцами. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down. См. официальный синтаксис.

Примеры

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

Источник

touch — action

Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство touch — action позволяет контролировать то, как с элементом можно взаимодействовать на сенсорных экранах.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• none — запрещает все типы взаимодействий. Можно обрабатывать события при помощи JavaScript.
• auto — разрешает все типы взаимодействия (значение по умолчанию).
• manipulation — элемент можно сдвигать и зумить. Это сокращение для комбинации pan — x pan — y pinch — zoom . Остальные нестандартные жесты, вроде двойного тапа, запрещены.
• pan — x — элемент можно сдвигать по оси x с помощью одного пальца. Это сокращение для значений pan — left и pan — right . Может использоваться в сочетании с pan — y , pan — up , pan — down и pinch — zoom .
• pan — y — элемент можно смещать по оси y с помощью одного пальца. Это сокращение для значений pan — up и pan — down . Может использоваться в сочетании с pan — x , pan — left , pan — right и pinch — zoom .
• pan — left — элемент можно смещать только если начать движение от левого края (эксперимент).
• pan — right — элемент можно смещать только если начать движение от правого края (эксперимент).
• pan — down — элемент можно смещать только если начать движение снизу вверх (эксперимент).
• pan — up — элемент можно смещать только если начать движение сверху вниз (эксперимент).
• pinch — zoom — элемент можно зазумить щипком. Можно совместить с pan — x , pan — left , pan — right , pan — y , pan — up , pan — down .

Источник