How to target the event that you click and use for offset

Question

I have several div elements. On the mousedown event I am getting the elements attribute that I clicked on and then using Jquery offset method, I can't seem to trigger the $(elt) properly, so that it picks up as Jquery.

I am trying to use as least as possible of Jquery library as wan to get rid of it.

offsetLeft and offsetTop are both JavaScript properties that are defined on an HTML element. offset() is a jQuery method that requires a jQuery object. I understood that all you need to is wrap the element like so $(elt) .

I get error on the last line on JS before closing tag.

 elementBlock.on('mousedown',function(e){
        var el = e.target.nodeName;
        var elt = e.target.getAttribute('id');
        console.log(elt); // i get the clean attribute
        console.log(el); // i get DIV
        elt.tmp.left = e.clientX - $(elt).offset().left;

}

HTML

 <div  id="elementBlock">
                  <div id="blue-left"></div>
                  <div id="blue-right"></div>
                </div>

Answer 1

You want to use $(e.target) instead of $(elt)

The problem in your current code is that if you want to target a jQuery element by ID you need to prefix that selector with a # .

So $("#" + elt) would also work, but they suggestion above is cleaner. See here for more information about jQuery Selectors: https://api.jquery.com/category/selectors/

Answer 2

Yes you can use $(elt) syntax but only if you prepend elt with the ID selector (ie # ). Refer to the jQuery documentation for ID Selector for more information.

Also, elt is assigned to the id attribute, which is a string. The string prototype has no property tmp . To set the style left you could access the style attribute of the element:

e.target.style.left = e.clientX - e.target.offsetLeft;

Edit:

You mentioned you are " trying to use as least as possible of Jquery library ". We can remove all jQuery functions and use native Javascript, as in the example below. It uses event delegation with document.addEventListener() (Note that there are limitations with support by older browsers, such as Internet Explorer- see the notes about adding event handlers with IE in the MDN documentation ), checks to see if the element clicked on is within the element with id attribute elementBlock (ie the element itself or a child element), and then utilizes the properties you mentioned: HTMLElement.offsetTop and HTMLElement.offsetLeft instead of jQuery's .position() .

And you likely noticed that usage of e.target.getAttribute('id') , was replaced by e.target.id - the property of the DOM element is sufficient. For more of an explanation on this, refer to this answer .

 //observe DOM ready document.addEventListener('DOMContentLoaded', function() { //observe clicks on the DOM document.addEventListener('click', function(clickEvent) { //look up the DOM tree from the event target to see if we clicked within the elementBlock container var target = clickEvent.target; while (target && target.id !== 'elementBlock' && target !== undefined) { target = target.parentNode; } //if we clicked within the elementBlock container if (target && target.id == 'elementBlock') { //log out the offsetTop and offsetLeft console.log('offsetTop: ', clickEvent.target.offsetTop); console.log('offsetLeft: ', clickEvent.target.offsetLeft); } }); });

 #container div { border: 1px solid #000; padding: 3px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="elementBlock">elementBlock <div id="blue-left">L</div> <div id="blue-right">R</div> </div> </div>