Converting jQuery code to pure JavaScript

@EnnasioJun 27.2014

Hi,

I have the following functions that is coded in jQuery and I want to convert it to pure JavaScript if possible.

[code=html]$(document).mouseup(function (e) { var container = $(‘#box’); if (!container.is(e.target) && container.has(e.target).length === 0) { … } });[/code]

Thanks for any ideas.

to post a comment

JavaScript

@deathshadowJun 27.2014 — #first I'd make a function to handle the event attach cross browser.

function eventAdd(e, event, handler) {
 if (e.addEventListener) e.addEventListener(event, handler, false);
 else e.attachEvent('on' + event, f);
 }

Then write the handler. You'd need to get the proper event cross browser as well as the event target; jQuery changing how that works

eventAdd(document, 'mouseup', function(e) {
 e = e || window.event;
 var t = e.target || e.srcElement;
 if (t == document.getElementById('box')) {
 }
 });

Though I'm not sure what "has" is doing passing the same object as self; if the first part of your IF is true, I'm not sure how passing itself to itself as an attribute search to pull a length makes any sense whatsoever.

Really that jq code doesn't even make sense at that point. Doesn't even make sense to attach it to document if all you want is a mouse-up on #box!

I mean, I'm not seeing why it's not just this:

eventAdd(document.getElementById('box'), 'mouseup', function(e) {
 e = e || window.event;
 var t = e.target || e.srcElement;
 // do whatever it is when you want a mouseup from box to be handled
 });

Though I'd also probably trap 'mouseout' as the same handler, unless you really want/need drag outside #box capabilities... generally in those cases though you'd trap mousedown on #box, and mouseup on document -- in which case store the down element in a variable instead of trying to detect it in the event.

But that's JQ in a nutshell, most of what people do with it is either CSS' job or doesn't make any sense in the first place.

@EnnasioauthorJun 27.2014 — #Thanks for the detailed reply! ? I will go through it and see how it will work. As a sidenote, my code catches "click"s that happen outside of "#box". I am using this function to close a popup window (#box) when I click outside of it. The jQuery version works just fine but I needed to make it pure JavaScript.

@deathshadowJun 27.2014 — #Ah, ok. Sneaky trick I use for doing that?

Create a position:fixed full-screen sibling element underneath the popup -- usually you'd have that anyways for something like a lightbox effect. Trap onclick on that to close that background and the popup, instead of trying to nab the document for it.

Though nowadays I'd probably make it an anchor and use :target, with scripting just to replicate the :target pseudo's behavior in IE8/earlier. With CSS 3 in the mix I'm increasingly not using JavaScript for stuff like this, or if scripting is involved, it's to trip the behaviors and fill in gaps in legacy browsers, not to actually create the functionality.

@EnnasioauthorJun 28.2014 — #Thanks for the tip, I will try that.

Converting jQuery code to pure JavaScript

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Converting jQuery code to pure JavaScript

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴