www.webdeveloper.com
Results 1 to 5 of 5

Thread: Converting jQuery code to pure JavaScript

  1. #1
    Join Date
    Apr 2011
    Posts
    14

    Converting jQuery code to pure JavaScript

    Hi,

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

    HTML Code:
    $(document).mouseup(function (e) {
    	var container = $('#box');
    	if (!container.is(e.target) && container.has(e.target).length === 0) {
    		...
    	}
    });
    Thanks for any ideas.

  2. #2
    Join Date
    May 2014
    Posts
    1,085
    first I'd make a function to handle the event attach cross browser.

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

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

    Code:
    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.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Apr 2011
    Posts
    14
    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.
    Last edited by Ennasio; 06-27-2014 at 01:19 PM.

  4. #4
    Join Date
    May 2014
    Posts
    1,085
    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.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Apr 2011
    Posts
    14
    Thanks for the tip, I will try that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles