CODEWITHSUNDEEP
javascriptjquery
Drakken Saer
Drakken Saer

Reputation: 889

Pass Ctrl + Click Event to another element in Firefox

It's come to my understanding that Firefox will not pass Ctrl + Click from label, to target input field. I'm at a loss as to how I can achieve this behaviour. I have checkbox fields, which are hidden, and their respective labels that are styled uniquely and visible... When clicking the label, click registers, but control click does not.

Upvotes: 0

Views: 491

Answers (2)

Vinay
Vinay

Reputation: 7674

I assume html as

<form>
 <label for="home" id="lblhome">home</label>
 <input type="checkbox" name="home" id="home"><br>
</form>

I want one thing if ctrl+cliked other thing if it's just click , the checkbox click code

$( "#home" ).click( function( e) {
if(e.ctrlKey)
  alert('i just got ctrl+cliked');
else
 alert('i just got clicked');
});

So now create handler for label check if it's ctrl+click if yes then create an jquery Event and change its ctrlKey property to true and trigger it on the checkbox.

$('#lblhome').click(
function(e){
  if(e.ctrlKey) {
    alert('ctrl+click on label');

    //cancel the normal click 
    e.preventDefault();
    e.stopPropagation();

    e2 = jQuery.Event("click");        
    //e2.which = 50;        //   for other key combos like CTRL+A+click 
    e2.ctrlKey = true;
    $( "#home").triggerHandler(e2);
    $( "#home").prop("checked", !$( "#home").prop("checked"));//toggle checkbox state
   }
});

DEMO : https://jsfiddle.net/35g41aaL/

Upvotes: 1

Gilad Artzi
Gilad Artzi

Reputation: 3084

This is kind of hacky, but it works: http://jsbin.com/dogelehena/edit?html,console,output

<input type="checkbox" id="cb">
<label for="cb">Label</label>

<script>
$(function () {
  var cb = $('#cb');
  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

  $('label').click(function (e) {
    if (e.ctrlKey && isFirefox) {
      var checked = cb.prop('checked');
      cb.prop('checked', !checked);
    }
  });
});
</script>

First, attaching the click event to the label and not the input. This way, the event is not blocked when ctrl is held down, but the checkbox state does not change. So in the callback, we check for e.ctrlKey, and if it's true, we change that checkbox's state manually.

Please note that I added the isFirefox check, because while this functionality fixes the behavior in Firefox, it breaks in other browsers.

Upvotes: 1

Related Questions