Catching a middle mouse button click in an Angular 6 directive
I made a custom directive in which I want to catch middle mouse button click events. I figured it'd just be a normal click event, and to go from there but it's only fired when the left mouse button is clicked.
@HostListener('click', ['$event']) onClick($event){
console.info('Click event fired', $event);
}
Any suggestions?
Thanks!
angular
asked Nov 13 '18 at 23:51
Tim VN
1116
add a comment |
I made a custom directive in which I want to catch middle mouse button click events. I figured it'd just be a normal click event, and to go from there but it's only fired when the left mouse button is clicked.
@HostListener('click', ['$event']) onClick($event){
console.info('Click event fired', $event);
}
Any suggestions?
Thanks!
angular
asked Nov 13 '18 at 23:51
Tim VN
1116
Use "mousedown" event, and make use of event callback "button" value:element.addEventListener('mousedown', (e)=>{alert(e.button);});
– Michał Dąbrowski
Nov 14 '18 at 0:15
add a comment |
I made a custom directive in which I want to catch middle mouse button click events. I figured it'd just be a normal click event, and to go from there but it's only fired when the left mouse button is clicked.
@HostListener('click', ['$event']) onClick($event){
console.info('Click event fired', $event);
}
Any suggestions?
Thanks!
angular
asked Nov 13 '18 at 23:51
Tim VN
1116
I made a custom directive in which I want to catch middle mouse button click events. I figured it'd just be a normal click event, and to go from there but it's only fired when the left mouse button is clicked.
@HostListener('click', ['$event']) onClick($event){
console.info('Click event fired', $event);
}
Any suggestions?
Thanks!
angular
angular
asked Nov 13 '18 at 23:51
Tim VN
1116
asked Nov 13 '18 at 23:51
Tim VN
1116
asked Nov 13 '18 at 23:51
Tim VN
1116
asked Nov 13 '18 at 23:51
Tim VN
1116
asked Nov 13 '18 at 23:51
Tim VN
1116
1116
Use "mousedown" event, and make use of event callback "button" value:element.addEventListener('mousedown', (e)=>{alert(e.button);});
– Michał Dąbrowski
Nov 14 '18 at 0:15
add a comment |
Use "mousedown" event, and make use of event callback "button" value:element.addEventListener('mousedown', (e)=>{alert(e.button);});
– Michał Dąbrowski
Nov 14 '18 at 0:15
Use "mousedown" event, and make use of event callback "button" value:
element.addEventListener('mousedown', (e)=>{alert(e.button);});– Michał Dąbrowski
Nov 14 '18 at 0:15
Use "mousedown" event, and make use of event callback "button" value:
element.addEventListener('mousedown', (e)=>{alert(e.button);});– Michał Dąbrowski
Nov 14 '18 at 0:15
add a comment |
2 Answers
2
active
oldest
votes
You need to handle the mouseup or mousedown event which capture all mouse clicks, rather than just the left button.
@HostListener('mouseup', ['$event']) onClick($event){
console.info('Click event fired', $event);
if($event.which === 2)
console.info('Middle mouse button clicked');
}
The $event variable returned will be a MouseEvent. You can check the which property to see which button was pressed. If $event.which === 2 then it will be the middle mouse button.
Here is a live example I created so you can see it in action.
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with<button>?
– Alex Wiese
Nov 14 '18 at 23:48
1
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
add a comment |
Try mousedown event and catch the middle button click
@HostListener('mousedown', ['$event']) onClick(e) {
console.log(e.which)
if (e.which === 2) {
console.log('Middle button ==> ', e.which)
e.preventDefault();
}
}
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291160%2fcatching-a-middle-mouse-button-click-in-an-angular-6-directive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to handle the mouseup or mousedown event which capture all mouse clicks, rather than just the left button.
@HostListener('mouseup', ['$event']) onClick($event){
console.info('Click event fired', $event);
if($event.which === 2)
console.info('Middle mouse button clicked');
}
The $event variable returned will be a MouseEvent. You can check the which property to see which button was pressed. If $event.which === 2 then it will be the middle mouse button.
Here is a live example I created so you can see it in action.
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with<button>?
– Alex Wiese
Nov 14 '18 at 23:48
1
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
add a comment |
You need to handle the mouseup or mousedown event which capture all mouse clicks, rather than just the left button.
@HostListener('mouseup', ['$event']) onClick($event){
console.info('Click event fired', $event);
if($event.which === 2)
console.info('Middle mouse button clicked');
}
The $event variable returned will be a MouseEvent. You can check the which property to see which button was pressed. If $event.which === 2 then it will be the middle mouse button.
Here is a live example I created so you can see it in action.
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with<button>?
– Alex Wiese
Nov 14 '18 at 23:48
1
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
add a comment |
You need to handle the mouseup or mousedown event which capture all mouse clicks, rather than just the left button.
@HostListener('mouseup', ['$event']) onClick($event){
console.info('Click event fired', $event);
if($event.which === 2)
console.info('Middle mouse button clicked');
}
The $event variable returned will be a MouseEvent. You can check the which property to see which button was pressed. If $event.which === 2 then it will be the middle mouse button.
Here is a live example I created so you can see it in action.
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
You need to handle the mouseup or mousedown event which capture all mouse clicks, rather than just the left button.
@HostListener('mouseup', ['$event']) onClick($event){
console.info('Click event fired', $event);
if($event.which === 2)
console.info('Middle mouse button clicked');
}
The $event variable returned will be a MouseEvent. You can check the which property to see which button was pressed. If $event.which === 2 then it will be the middle mouse button.
Here is a live example I created so you can see it in action.
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
edited Nov 14 '18 at 0:21
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
answered Nov 14 '18 at 0:03
Alex Wiese
6,34943060
6,34943060
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with<button>?
– Alex Wiese
Nov 14 '18 at 23:48
1
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
add a comment |
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with<button>?
– Alex Wiese
Nov 14 '18 at 23:48
1
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
Thank you. I remember trying mouseup and it didn't work so I tried to see what the issue is. It won't trigger on a button, but will on say a td. Any reason for this behaviour?
– Tim VN
Nov 14 '18 at 15:28
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with
<button>?– Alex Wiese
Nov 14 '18 at 23:48
@TimVN hmm it is working for me, can you please check this new live example I created using a directive with
<button>?– Alex Wiese
Nov 14 '18 at 23:48
1
1
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
It was because of the order in which I import my modules. I was using it in my entry component, so apparently I had to move up the loading of my directives module. Thanks for your help.
– Tim VN
Nov 15 '18 at 1:23
add a comment |
Try mousedown event and catch the middle button click
@HostListener('mousedown', ['$event']) onClick(e) {
console.log(e.which)
if (e.which === 2) {
console.log('Middle button ==> ', e.which)
e.preventDefault();
}
}
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
add a comment |
Try mousedown event and catch the middle button click
@HostListener('mousedown', ['$event']) onClick(e) {
console.log(e.which)
if (e.which === 2) {
console.log('Middle button ==> ', e.which)
e.preventDefault();
}
}
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
add a comment |
Try mousedown event and catch the middle button click
@HostListener('mousedown', ['$event']) onClick(e) {
console.log(e.which)
if (e.which === 2) {
console.log('Middle button ==> ', e.which)
e.preventDefault();
}
}
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
Try mousedown event and catch the middle button click
@HostListener('mousedown', ['$event']) onClick(e) {
console.log(e.which)
if (e.which === 2) {
console.log('Middle button ==> ', e.which)
e.preventDefault();
}
}
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
answered Nov 14 '18 at 0:03
Gabriel Lopez
2376
2376
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291160%2fcatching-a-middle-mouse-button-click-in-an-angular-6-directive%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Use "mousedown" event, and make use of event callback "button" value:
element.addEventListener('mousedown', (e)=>{alert(e.button);});– Michał Dąbrowski
Nov 14 '18 at 0:15