driver.js icon indicating copy to clipboard operation
driver.js copied to clipboard

How to gracefully block all events when highlighting?

Open Moon1102 opened this issue 4 years ago • 5 comments

I found,in all steps, when the mouse clicks or places on (hover) the highlighted area, user can interact with dom which in the area. I feel maybe it's not good because it's user guide, maybe user shouldn't do something at this time.


As the picture above. If user can click to expand the menu, he can't shrink.(TAT) So could you tell me how can I prevent all event when highlighted? by set a attribute? or after some function call? Now I just use document.getElementById(xxx) to get dom and set style pointer-events to none in onNext function,it's work. But I use Vue.js,it not recommend to use document....

Looking forward to reply :)

Moon1102 avatar Feb 01 '20 13:02 Moon1102

There is allowClose which blocks the external interactions. Did you try that? If yes, please provide a reproducing example for us to look at. Thanks!

kamranahmedse avatar Feb 04 '20 10:02 kamranahmedse

Maybe I didn't express the right meaning...(for my poor English 🤣) According to the comments(Whether the click on overlay should close or not),the property allowCase controls whether the overlay can be hidden by clicking on the gray mask,I didn't find that it could affect the highlighted area whatever I set it true or false.

But what I want is all events in the highlighted area should be blocked,otherwise,just like the picture I sent, the user accidentally clicked the button and looked a little strange.

Now in my project, I add:

.driver-highlighted-element { z-index: 100004 !important; pointer-events: none; }

It can meet my current needs. But I don't think it's the best generic way.

Moon1102 avatar Feb 05 '20 05:02 Moon1102

I write a example:

If you block line 192 of CSS, clicking the red box will alert click, otherwise it will not.

Moon1102 avatar Feb 05 '20 06:02 Moon1102

I had the same problem and @Moon1102 solution works great. Thanks!

@kamranahmedse - it would be worth to add additional parameter to handle it through Driver contructor rather then overwriting CSS.

tw2as avatar Mar 27 '20 12:03 tw2as

Same issue here

koutsenko avatar Apr 15 '20 18:04 koutsenko

For anyone further searching for a solution in 2023 (Because Driver still happens to be one of the simplest tour libraries out there!)

My solution was to modify the css as follows:

`.driver-highlighted-element { z-index: 100004 !important; pointer-events: none !important; user-select: none !important; }

.driver-highlighted-element * { pointer-events: none !important; user-select: none !important; }`

Adding that extra block targets all children of the highlighted element. This is useful for if you use pointer-events in any children, this will override it.

JudahMantell avatar Mar 22 '23 20:03 JudahMantell

We now add driver-active-element to the active element.

Also, we just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.

kamranahmedse avatar Jul 05 '23 16:07 kamranahmedse