How to gracefully block all events when highlighting?

[Moon1102]

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 :)

[kamranahmedse]

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!

[Moon1102]

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]

I write a example:

http://jsrun.pro/tqfKp/edit

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

[tw2as]

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.

[koutsenko]

Same issue here

[JudahMantell]

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.

[kamranahmedse]

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.