jQuery click on specific part of div

Question

When link is clicked, I need jQuery to click on specific part of a div, lets say exactly 1px from its right side.

I'm familiar with jQuery, but I'm not sure how offsets really work in this case?

HTML

<div class="container">
  <div class="toBeClicked">Click the right side of me!</div>
</div>

EDIT: I've added JSfiddle for reference: https://jsfiddle.net/ebc59bah/1/

You can create a div for the area on which you want to listen to click events, and then register the click event on this div. — Nisarg Shah, Jul 16 '17 at 16:26
In my case I can't, it's a div within plugin and I can't access it, so I have to think some sort of workaround, hence this weird question. — DearBee, Jul 16 '17 at 16:43
You can't bind to a specific region of a div. You can bind to the entire div and then possibly check the coordinates of the click but I'd lean towards having a separate div that fit the area you are concerned with and binding to that. — Matt, Jul 16 '17 at 16:44
https://stackoverflow.com/questions/14651306/get-mouse-position-within-div#14651424 — Matt, Jul 16 '17 at 16:44

liontass · Answer 1 · 2017-07-16T17:56:20.553

Check this code.I create two color boxes.The red is the container and the aqua is the div that you want 1px right aside to have an event.I get the pageX position and via if condition I trigger the alert() method.Note the CSS setting specially the html and body because I don't want to have any margin in pixels that must adding to the if condition:

$('.container').on('click',function(e){
  var xPosition=e.pageX;  
  if(xPosition>01 && xPosition<150){
    alert('Click');
  }
});

html, body {
    margin: 0;
    padding: 0;
}

.container{  
   height: 150px;
   width: 250px;
   background-color:#FF0000;
}
.toBeClicked{
   position: inherit;
   font-size: 150%;
   height: 140px;
   width:  150px;   
   background-color: #00FFFF;
   word-break: keep-all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="toBeClicked">Click the right side of me!</div>
</div>

I guess I worded this wrong, tho it's odd question to begin with. What I meant is I need jQuery to click that right part of a div and to do so by clicking 1px from its right side (the beginning of a div, but on its right side). Here, I drew it here for reference: https://jsfiddle.net/ebc59bah/1/ — DearBee, Jul 16 '17 at 17:47

jQuery click on specific part of div

1 Answers1