Back Ground

CSS - 이벤트 제어 (pointer-events) 본문

CSS

CSS - 이벤트 제어 (pointer-events)

Back 2019. 12. 17. 17:50

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각한다.

대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity속성을 이용한 경우라면

노출되진 않지만 해당영역의 이벤트에 응답하기 된다.

 

이를 강제로 제어하기 위해서는 pointer-events를 활용해야 한다.

 

  • 숨김처리 속성에 따른 특성

    요소를 숨길때 사용되는 CSS속성

    숨김 속성과 값 공간 점유 이벤트 탭(Tab)접근
    opacity: 0 점유  활성 가능
    visibility: hidden 점유 비활성 불가능
    visibility: collapse 테이블안에서만 비 점유 비활성 불가능
    display: none 비점유 비활성 불가능

    이벤트가 비활성되는 속성들을 사용하면 좋겠지만,
    트랜지션(전환)이나 애니메이션 같이 프레임별로 진행되는 효과를 요소에 부여하여
    숨김처리를 하는경우
    opacity이외에는 맞당한 방법이 없다.
    설상가상으로 해당 요소가 고정된 위치를 부여받은 경우(position)해당 요소는 원치않는 이벤트를 발생시킬 위험도가 높아진다.

  • point-events 속성

    위와 같이 어떤 경우에는 요소에 부여된 이벤트를 제거하거나 다시 활성화 시켜야 하는 경우가 생길 수 있다.pointer-events는 HTML요소들의 마우스, 터치 이벤트들({Css: hover,active}, {Js : click,tap, 커서, 드래그}등)의 응답을 조정 할 수 있는 속성이다.

    .hidden { opacity: 0; pointer-events: none; }

    pointer-events속성은 11개의 속성값을 가지지만 3개를 제외하고는 모두 SVG에서 사용하도록 예약되어 있다.


    [ HTML요소에서 사용가능한 속성 ]

    - none : HTML 요소에 정의된 클릭, 상태(hover,acive등), 커서 옵션들이 비활성화 시킨다.
    - auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.
    - inherit : 부모요소로부터 pointer-evnets값을 상속 받는다.

가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사아자카타파하가나다라마바사

이 요소를 통과해서 드래그 가능

 

!주의

IE9와 IE10에서 pointer-events가 동작하지 않기 때문에 visibility: hidden값과 함께 사용하는것을 고려하도록하자

참고 

pointer-envets

Does opacity:0 have exactly the same effect as visibility:hidden

CSS - イベント制御

 

よくイベントが付与された要素を非表示に対応するイベントが動作しないんだと思う。

ほとんどの意図した結果を反映しますが、隠し処理に使用した方法がopacity属性を利用した場合は、

露出ドゥェジンが、その領域のイベントに応答するされる。

 

これを強制的に制御するためには、pointer-eventsを活用しなければならない。

 

  • 隠し処理属性による特性
    要素を非表示にするときに使用されているCSSプロパティ

    隠し属性と値 スペース占有 イベント タブ(Tab)アクセス
    opacity:0 占有  アクティブ 可能
    visibility:hidden 占有 アクティブ 不可能
    visibility:collapse テーブル内でのみ非占有 アクティブ 不可能
    display:none 非占有 アクティブ 不可能

    イベントがアクティブされた属性を使用すると、いいのですが、
    トランジション(移行)やアニメのようにフレームごとに行われている効果を要素に付与して
    非表示の処理をした場合、
    opacity以外マトダンた方法がない。
    さらに悪いことに、その要素が固定された位置を付与された場合(position)、その要素は、不要なイベントを発生させるリスクが高くなる。

  • point-events属性

    上記のようにいくつかの場合には、要素に付与されたイベントを削除したり、再度有効になければならない場合が生じることがあります。pointer-eventsは、HTML要素のマウス、タッチイベントに({Css:hover、active}、{Js:click、tap、カーソル、ドラッグ}など)の応答を調整することができる属性である。

    .hidden { opacity: 0; pointer-events: none; }

    pointer-eventsプロパティは、11個の属性値を持つが、3つを除いては、すべてのSVGで使用するために予約されている。


    [HTML要素で使用可能なプロパティ]

    - none:HTML要素に定義されたクリック、状態(hover、aciveなど)、カーソルオプションが無効にする。
    - auto:無効化され、イベントを再基本的な機能をするように戻す。
    - inherit:親要素からpointer-evnets値を継承します。

カナタラマバーサアザカタパハあいうえおラマバーサアザカタパハあいうえおラマバーサアザカタパハあいうえおラマバーサ

この要素を通過して、ドラッグ可能

 

!注意

IE9とIE10でpointer-eventsが動作していないので、visibility:hidden値と共に使用することを考慮するようにしましょう

参考 

pointer-envets

Does opacity:0 have exactly the same effect as visibility:hidden

 

Often, if you hide an element to which an event is assigned, you think that the event will not work.

Most reflect the intended result, but if the method used for hiding is using the opacity property

It is not exposed, but responds to events in the area.

 

To forcibly control this , you should use pointer-events .

 

  • Characteristics according to the hidden treatment attribute
    CSS properties used when hiding elements

    Hidden attributes and values Occupy space event Tab access
    opacity: 0 occupancy  activation possible
    visibility: hidden occupancy Inactive impossible
    visibility: collapse Non-occupied only in table Inactive impossible
    display: none Unoccupied Inactive impossible

    It would be nice to use properties in which the event is inactive, but there is no proper method other than opacity when hiding an
    element by applying frame-by-frame effects such as transition (transition) or animation . To make matters worse, if the element is given a fixed position, the element is at increased risk of generating unwanted events.




  • point-events property

    As above, in some cases, it may be necessary to remove or reactivate an event assigned to an element. pointer-events is a property that can control the response of HTML elements' mouse and touch events ({Css: hover,active}, {Js: click, tap, cursor, drag}).

    .hidden { opacity: 0; pointer-events: none; }

    The pointer-events property has 11 property values, but all but 3 are reserved for use by SVG.


    [Attributes available in HTML element]

    -none : Inactivate click, state (hover, acive, etc.), cursor options defined in HTML element.
    -auto : Returns the disabled event to its basic function again. -inherit:
    Inherit the pointer-evnets value from the parent element.

Kanadaramabasa azakatapaha Kanadaramabasa azakatapaha Kanadaramabasa azakatapaha Kanadaramabasa

You can drag through this element

 

!caution

Note that pointer-events do not work in IE9 and IE10, so consider using it with visibility: hidden value.

Note 

pointer-envets

Does opacity:0 have exactly the same effect as visibility:hidden

'CSS' 카테고리의 다른 글

CSS3 - rem 과 em의 차이점  (0) 2018.11.25
Comments