iohook
iohook copied to clipboard
wilix-team
Click on DOM will cause it trigger a mouseleave/mouseout event when used in electron.
Expected Behavior
This should behave the same as in the browser, Clicking on DOM should not let it trigger a mouseout/mouseleave event.
Current Behavior
DOM will trigger a mouseleave/mouseout event when click on it.
Possible Solution
It would be nice if iohook could provide an interface to disable mouse hook which is possible to solve the problem since mouse events are not used in my case.
Steps to Reproduce (for bugs)
// main.js
const iohook = require('iohook');
iohook.start();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<style>
.iohook {
width: 100px; height: 100px; background-color: #ccc;
}
.iohook:hover {
background-color: #c00;
}
</style>
</head>
<body>
<div class="iohook"></div>
</div>
<script>
var $iohook = document.getElementsByClassName('iohook')[0];
$iohook.addEventListener('mouseenter', function() { console.log('mouseenter'); });
$iohook.addEventListener('mouseout', function() { console.log('mouseout'); });
$iohook.addEventListener('mouseover', function() { console.log('mouseover'); });
$iohook.addEventListener('mouseleave', function() { console.log('mouseleave'); });
</script>
</body>
</html>
- Move the mouse into the box where the class is iohook, will log
mouseover,mouseenter - Click on it, will log
mouseout,mouseleave - Move the mouse around a little bit in the box, will log
mouseover,mouseenter - Move the mouse out of box, will log
mouseout,mouseleave
Context
In my project, some buttons appear only if their parent node is in hover state. This issue will cause buttons disappear when click on them, and appear again if move arround a little bit.
Your Environment
- Version used:
[email protected] - Environment name and version (e.g. Chrome 39, node.js 5.4): node.js
v10.5.0, electronv2.0.9 - Operating System and version (desktop or mobile):
Windows 10 x64
Hi there,
I don't get where are you using iohook here ? your main.js isn't included in your HTML file.
Hi there,
I don't get where are you using iohook here ? your main.js isn't included in your HTML file.
Thanks a lot for reply!
I just build a demo for this issue refer to electron-quick-start template.
By the way, I tested it on my MacBook, and it won't be reproduced on my MacBook. I think this is a bug that only appears on Windows operating systems.
Ok I see.
What you are doing is simply using DOM elements, not the iohook lib :-).
To be sure, try removing all iohook things in main.js and renaming all
"iohook" div (these are just regular div) into something else like
"example", and your listeners will still work.
Cheers
-- Julien
Le dim. 3 févr. 2019 à 16:48, Zero Tung [email protected] a écrit :
Hi there,
I don't get where are you using iohook here ? your main.js isn't included in your HTML file.
Thanks a lot for reply!
I just build a demo https://github.com/zerotung/electron-iohook-demo for this issue refer to electron-quick-start template.
By the way, I tested it on my MacBook, and it won't be reproduced on my MacBook. I think this is a bug that only appears on Windows operating systems.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wilix-team/iohook/issues/141#issuecomment-460062858, or mute the thread https://github.com/notifications/unsubscribe-auth/ABHZtCZG1DxpIIBYrcceuLVEOOVzmVfhks5vJwTBgaJpZM4adigs .
Yes, I did not call any iohook interfaces in the demo. I just want to explain that, as long as I import iohook lib and run iohook.start(), it causes problems.
Normally in web page, it doesn't seem to trigger mouseout/mouseleave event on click on DOM element.
