pointer-events – devfrontend.info

Source : make an input invisible but clickable through CSS?

input {
  opacity: 0;
}

input {

opacity: 0;

}

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

input[type=radio] {
  border: 0px;
  width: 100%;
  height: 2em;
}

input[type=radio] {

border: 0px;

width: 100%;

height: 2em;

}

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

/*
 * Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).
 * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details.
 * https://github.com/kmewhort/pointer_events_polyfill
 */

// constructor
function PointerEventsPolyfill(options){
    // set defaults
    this.options = {
        selector: '*',
        mouseEvents: ['click','dblclick','mousedown','mouseup'],
        usePolyfillIf: function(){
            if(navigator.appName == 'Microsoft Internet Explorer')
            {
                var agent = navigator.userAgent;
                if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){
                    var version = parseFloat( RegExp.$1 );
                    if(version < 11)
                      return true;
                }
            }
            return false;
        }
    };
    if(options){
        var obj = this;
        jQuery.each(options, function(k,v){
          obj.options[k] = v;
        });
    }

    if(this.options.usePolyfillIf())
      this.register_mouse_events();
}

// singleton initializer
PointerEventsPolyfill.initialize = function(options){
    if(PointerEventsPolyfill.singleton == null)
      PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);
    return PointerEventsPolyfill.singleton;
};

// handle mouse events w/ support for pointer-events: none
PointerEventsPolyfill.prototype.register_mouse_events = function(){
    // register on all elements (and all future elements) matching the selector
    jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){
       if(jQuery(this).css('pointer-events') == 'none'){
             // peak at the element below
             var origDisplayAttribute = jQuery(this).css('display');
             jQuery(this).css('display','none');

             var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

            if(origDisplayAttribute)
                jQuery(this)
                    .css('display', origDisplayAttribute);
            else
                jQuery(this).css('display','');

             // fire the mouse event on the element below
            e.target = underneathElem;
            jQuery(underneathElem).trigger(e);

            return false;
        }
        return true;
    });
};

* Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).

* https://github.com/kmewhort/pointer_events_polyfill

// constructor

function PointerEventsPolyfill(options){

// set defaults

this.options = {

selector: '*',

mouseEvents: ['click','dblclick','mousedown','mouseup'],

usePolyfillIf: function(){

if(navigator.appName == 'Microsoft Internet Explorer')

{

var agent = navigator.userAgent;

if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){

var version = parseFloat( RegExp.$1 );

if(version < 11)

return true;

}

return false;

}

};

if(options){

var obj = this;

jQuery.each(options, function(k,v){

obj.options[k] = v;

});

}

if(this.options.usePolyfillIf())

this.register_mouse_events();

}

// singleton initializer

PointerEventsPolyfill.initialize = function(options){

if(PointerEventsPolyfill.singleton == null)

PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options);

return PointerEventsPolyfill.singleton;

};

// handle mouse events w/ support for pointer-events: none

PointerEventsPolyfill.prototype.register_mouse_events = function(){

// register on all elements (and all future elements) matching the selector

jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){

if(jQuery(this).css('pointer-events') == 'none'){

// peak at the element below

var origDisplayAttribute = jQuery(this).css('display');

jQuery(this).css('display','none');

var underneathElem = document.elementFromPoint(e.clientX, e.clientY);

if(origDisplayAttribute)

jQuery(this)

.css('display', origDisplayAttribute);

else

jQuery(this).css('display','');

// fire the mouse event on the element below

e.target = underneathElem;

jQuery(underneathElem).trigger(e);

return false;

}

return true;

});

};

Source : Click through a DIV to underlying elements

Astuce utile lorsqu’on veut exploiter, sur périphériques mobiles et tactiles (smartphones, tablettes), le widget de l’élément de formulaire <select /> proposé nativement par les navigateurs.
Ci-dessous affichage dans un navigateur desktop vs. smartphone.

Attention : la partie javascript visant à changer le visuel du drapeau en fonction du choix de l’utilisateur ne fonctionne en l’état que si la page est entièrement rechargée.
On ne peut pas simuler le clic sur un élement <select /> en jQuery.

<div id="mobileSwitchlanguage">
  <label for="doSwitchLanguage" class="label-switchlanguage">
    <i id="is-flag"></i>
  </label>
  <select id="doSwitchLanguage" name="mobile-switchlanguage" class="select-switchlanguage">
    <option value="fr">Français</option>
    <option value="es">Español</option>
    <option value="it">Italiano</option>
    <option value="gb">English</option>
  </select>
</div>

</label>

<option value="fr">Français</option>

<option value="es">Español</option>

<option value="it">Italiano</option>

<option value="gb">English</option>

</select>

</div>

#mobileSwitchlanguage {
  position: relative;
}
.label-switchlanguage {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: left;
}
.select-switchlanguage {
  width: 18px;
  height: 10px;
  margin-top: 2px;
}
#is-flag {
  display: inline-block;
  width: 22px;
  height: 14px;
}
#is-flag.fr {
  background-image: url(img/fr.png);
}
#is-flag.es {
  background-image: url(img/es.png);
}
#is-flag.it {
  background-image: url(img/it.png);
}
#is-flag.gb {
  background-image: url(img/gb.png);
}

#mobileSwitchlanguage {

position: relative;

}

.label-switchlanguage {

pointer-events: none;

position: absolute;

top: 0;

left: left;

}

.select-switchlanguage {

width: 18px;

height: 10px;

margin-top: 2px;

}

#is-flag {

display: inline-block;

width: 22px;

height: 14px;

}

#is-flag.fr {

}

#is-flag.es {

}

#is-flag.it {

}

#is-flag.gb {

}

jQuery(document).ready(function(){
  // On récupère la valeur de l'attribut 'value' de l'élément <option /> pour l'affecter sous forme de classe à l'élément <label /> (pour afficher les différents drapeaux)
  var getDefaultOptionValue = jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').val();
  jQuery('label[for="doSwitchLanguage"] #is-flag').addClass(getDefaultOptionValue);
  
  // Passée cette ligne, le code ci-dessous ne donnera pas de résultat.
  jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').on('click', function(){
    var getOptionNewValue = jQuery(this).val();
    jQuery('label[for="doSwitchLanguage"] #is-flag').removeClass().addClass(getOptionNewValue);
  });
});

jQuery(document).ready(function(){

// On récupère la valeur de l'attribut 'value' de l'élément <option /> pour l'affecter sous forme de classe à l'élément <label /> (pour afficher les différents drapeaux)

var getDefaultOptionValue = jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').val();

jQuery('label[for="doSwitchLanguage"] #is-flag').addClass(getDefaultOptionValue);

// Passée cette ligne, le code ci-dessous ne donnera pas de résultat.

jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').on('click', function(){

var getOptionNewValue = jQuery(this).val();

jQuery('label[for="doSwitchLanguage"] #is-flag').removeClass().addClass(getOptionNewValue);

});

Articles récents

Catégories

Archives

Méta

Étiquette : pointer-events

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9

[CSS] Activer un champ Select en cliquant à travers un élément sous-jacent avec la propriété CSS pointer-events

Changer les dimensions d’un input type radio ou checkbox

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

Un polyfill pour émuler les effets de la propriété CSS `pointer-events` sous IE9