In any situation, publicly pointing out other people’s bugs is a little too emotionally insensitive. However, I believe that the Nuggets such an excellent and open platform is tolerant of different voices, and this point I think it is worth sharing with you, so much offended, please forgive me.

Bug point

The nuggets home page list has multiple levels of nested < A /> tags. Although there is a parent jump in JS logic, but this in my cognition is not quite in line with the standard.

For example, if we write a nested directly in VSCode, we will find that in Chrome the nested logic will try to be flattened into two sibling tags.

The reason why the nuggets home page still has nested logic, I guess, is because the list of home pages is rendered dynamically in JS and ignores the browser repair logic.

Half-baked advice

Blaming others without offering a solution is also easy to beat.

If we were to remove some of the superfluous items from the nuggets front page list, we would be left with an infrastructure like the one shown above.

This kind of data list is very common in our web pages. Usually to increase the user experience, even though there are already clicks that show more links, visually we still make the entire

  • click trigger the logic of clicking more links.

    • So adding a link that wraps around the entire

  • element is an intuitive processing logic. Because you can’t use JS to listen for

  • clicks and then trigger more jumps to this link?

    Here’s a neat solution I can think of:

    Having our directly and absolutely positioned over our entire

  • area allows us to achieve the same effect without either modifying the DOM structure or adding linkage events via JS.

    There are, of course, two minor issues to note:

    1. More linksAs a mask, it also covers the following two links, which cannot be touched by the mouse. Of course, the whole solution is relatively simple, just need to set a ratio for the next two linksMore linkshigherz-indexIt is good. Because I’m not setting up any more links herez-indexSo, I just need to let the subsequent elements setposition:relativeIt is good.

    1. More linksThe copy will be displayed at the top of the page, where you need to hide it. There are many ways to hide elements, and these are recommendedtext-indentNegative value. But this is not recommendedopacity: 0;To hide elements. becauseopacityWill also let<a/>Elements in thefocusThe external glow in the state disappears. This is not accessible friendly.

    expand

    This process of creating a blank mask is called a ghost mask.

    Ghost masks are great for situations like extending the clickable area of the user as discussed in the previous section, or situations where you want the user to see elements but don’t want the user to be able to manipulate them.

    Taking the starting novel reading page as an example, I want to click on all areas of the page except the book cover and the yellow area to trigger the toolbar.

    If you use JS to judge, you need to listen to the click event of the whole page, and then determine whether the click event bubbles to the book seal or yellow area. Block the click event if it is, and call out the toolbar if it is not. And if the subsequent button of this page increases, the JS logic here will increase with it, and there will be a thankless feeling.

    In this case, if the ghost mask scheme is used. Quite simply, you just create a ghost mask and bind the event of the exhale toolbar to the ghost mask. For elements that have other click logic, simply set their Z-index beyond the ghost mask. There is only one JS binding event globally, there is no bubbling logic. In subsequent extensions, it is also easy and convenient to just set z-index.

    Or say you have a complex form, you click the Submit button, and the data is being sent. You don’t want the user to manipulate other controls or click Submit multiple times. You only need to make the ghost mask appear when the user clicks Submit, and make the ghost mask disappear after loading is completed.

    In this way, all the user’s clicks in loading state will be intercepted by the ghost mask. You can even pop up a toast after the user clicks the ghost mask to tell the user that he is currently loading. And this whole logic is actually quite complicated without a ghost mask.

    And the whole process is unconscious to the user. A ghost mask is a mask that the user can’t see.

    one more thing

    The ghost mask has a similar property called pointer-events: None; .

    • The ghost mask is so that the user can not see, but can touch;
    • pointer-events: none;Is to let the user see, but not touch;

    This property also applies if you don’t want the Submit button to be clicked multiple times by the user to trigger multiple Submit logic. Just set pointer-events: None to the button after the user clicks it. Property. Remove this property after, for example, loading or 500ms. This can be very convenient to do click interception.

    END

    The whole logic is a matter of personal experience, and any inaccuracies are welcome.

    You are also welcome to share similar scenarios using ghost masks to solve tricky problems.