How to handle multiple events with meteor 1.2

help
1

Hi,

I am very new to Meteor.js. I am using Meteor version 1.2. To toggle the aria-expanded value I need to write some event listener that toggle the attribute value. But the event must happen for both keyboard keypress and mouse click.

Here is the code that I’ve tried.

'keydown .aria-expanded-toggle, click .aria-expanded-toggle': function (event) {
        $(event.target).attr("aria-expanded", function (i, attr) {
            return attr == 'true' ? 'false' : 'true'
        });
    }

But it does not work with the keydown event. But it might work with click event. Even I also tried to write different two event handlers, but that is not also working.

How can I achive this ? Another thing if you have any better solution that how can I toggle the aria-expanded value, please guide me.

Thanks.

2

Did you try another event than keydown ? (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)

To toggle the attribute you could do this I think (without using jQuery) :

const elem = event.currentTarget;
const attr = elem.getAttribute( 'my-attribute' );

elem.setAttribute( 'my-attribute', attr == true ? false : true );
3

How are you targeting the element when sending keydown events? Is the target a focusable element?

4

i don’t think you can bind mulltiple event handlers that way.
What i’d do is something like this:

Template.yourTemplate.events({
  'keydown .aria-expanded-toggle': handleEvent,
  'click .aria-expanded-toggle': handleEvent
});

function handleEvent (event) {
  $(event.target).attr("aria-expanded", function (i, attr) {
    return attr == 'true' ? 'false' : 'true'
  });
}

just tested it, works fine for me :slight_smile:

5

You can definitely select multiple event types in blaze. Both

'keydown .aria-expanded-toggle, click .aria-expanded-toggle': function (event) {
}

and the lesser known:

'keydown/click .aria-expanded-toggle': function (event) {
}

will work. I use them very regularly

2 Likes