How to gracefully block all events when highlighting?

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]

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.

[koutsenko]

Same issue here