Be Slightly Careful with Sub Elements of Clickable Things

Filed in Web Design | Web Development Leave a comment

Say you want to attach a click handler to a <button>. You almost surely are, as outside of a <form>, buttons don’t do anything without JavaScript. So you do that with something like this:

var button = document.querySelector("button");
button.addEventListener("click", function(e) { // button was clicked
});

But that doesn’t use event delegation at all.

Event delegation is where you bind the click handler not directly to the element itself, but to an element higher up the DOM tree. The idea being that you can rip out and plop in new DOM stuff inside of there and not worry about events being destroyed and needing to re-bind them.

Say our button has a gear icon in it:

<button> <svg> <use xlink:href="#gear"></use> </svg>
</button>

And we bind it by watching for clicks way up on the document element itself:

document.documentElement.addEventListener("click", function(e) { });

How do we know if that click happened on the button or not? We have the target of the event for that:

document.documentElement.addEventListener("click", function(e) { console.log(e.target);
});

This is where it gets tricky. In this example, even if the user clicks right on the button somewhere, depending on exactly where they click, e.target could be:

  • The button element
  • The svg element
  • The use element

So if you were hoping to be able to do something like this:

document.documentElement.addEventListener("click", function(e) { if (e.target.tagName === "BUTTON") { // may not work, because might be svg or use }
});

Unfortunately, it’s not going to be that easy. It doesn’t matter if you check for classname or ID or whatever else, the element itself that you are expecting might just be wrong.

There is a pretty decent CSS fix for this… If we make sure nothing within the button has pointer-events, clicks inside the button will always be for the button itself:

button > * { pointer-events: none;
}

This also prevents a situation where other JavaScript has prevented the event from bubbling up to the button itself (or higher).

document.querySelector("button > svg").addEventListener("click", function(e) { e.stopPropagation(); e.preventDefault();
}); document.querySelector("button").addEventListener("click", function() { // If the user clicked right on the SVG, // this will never fire
});

Be Slightly Careful with Sub Elements of Clickable Things is a post from CSS-Tricks

Strongly Held Opinions, Gone Away

Filed in Web Design | Web Development Leave a comment

I received a really wonderful question from Bryan Braun the other day during a workshop I was giving at Sparkbox. He asked if, over the years, if there were opinions about web design and development I strongly held that I don’t anymore.

I really didn’t have a great answer at the time, even though surely if I could rewind my brain there would be some embarrassing ones in there.

At the risk of some heavy self-back-patting, this is exactly the reason I try and be pretty open-minded. If you aren’t, you end up eating crow. And for what? When you crap on an idea, you sound like a jerk at the time, and likely cause more harm than good. If you end up right, you were still a jerk. If you end up wrong, you were a jerk and a fool.

I like the sentiment the web is a big place. It’s a quick way of saying there are no hard and fast right answers in a playground this big with loose rules, diversity of everything, and economic overlords.

I don’t want to completely punt on this question though.

I’ve heard Trent Walton say a number of times that, despite him being all-in on Responsive Web Design now, at first it seemed like a very bad idea to him.

I remember feeling very late to the CSS preprocessing world, because I spent years rolling my eyes at it. I thought it the result of back end nerds sticking their noses into something and bringing programming somewhere that didn’t need it. Looking back, it was mostly me being afraid to learn the tools needed to bring it into a workflow.

It’s not to find industry-wide holy wars these days, where strongly held opinions duke it over time, and probably end up giving ground to each other in the end.

But what of those internal personal battles? I’d be very interested to hear people’s answers on this…

What strongly-help opinion did you used to have about web design and development, but not anymore?


Strongly Held Opinions, Gone Away is a post from CSS-Tricks

TOP
Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin