निर्धारण करता है, तो माउस क्लिक DIV

Question

अगर यह गणना करने के लिए करता है, तो एक माउस क्लिक div तत्व के बाएं या दाएं आधे से अधिक हुआ संभव है मैं सोच रहा था की बाईं या दाईं छमाही में हुआ:

$("div").click(function(e){ 
// calculate if click happened on left or right half 
}); 


<div>Variable Content</div> 

वहाँ उम्मीद कर रहा था होगा रिश्तेदार निर्देशांक प्राप्त करने और उन्हें div की चौड़ाई से जोड़ने का एक तरीका बनें?

Answer 1

$("div").click(function(e){ 
    var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders 
    var pOffset = $(this).offset(); 
    var x = e.pageX - pOffset.left; 
    if(pWidth/2 > x) 
     $(this).text('left'); 
    else 
     $(this).text('right'); 
}); 

डेमो: http://jsfiddle.net/dirtyd77/QRKn7/1/

आशा इस मदद करता है! अगर आपका कोई प्रश्न हैं, तो मुझे से पूछें!

Answer 2

यह करना चाहिए:

$("div").click(function(e){ 
    var $div = $(this); 
    alert(e.pageX >= ($div.offset().left + $div.width()/2) ? 'clicked right' : 'clicked left'); 
}); 

Answer 3

भीतर माउस की स्थिति को पाने के लिए आपको माउस की स्थिति और div ऑफसेट के बीच अंतर की गणना कर सकते हैं। फिर इसे div की आधा चौड़ाई और voilà से तुलना करें।

संपादित

$(function() 
{ 

    $("#test").click(function(e){ 
     var offset = $(this).offset(); 
     var pos_x = e.pageX - offset.left; 
     var middle = $(this).outerWidth()/2; 

     if(pos_x < middle) 
     { 
      alert('left part'); 
     } 
     else 
     { 
      alert('right part'); 
     } 
    }); 

}); 

आप इसे यहां देख सकते हैं:

http://jsfiddle.net/kZuML/

Answer 4

var x = evt.pageX - $(this).offset().left 

if (x > $(this).width()/2) { 
    //Right half 
} else { 
    //Left half 
} 

तो पूर्ण कोड होगा

$("div").click(function(e){ 
    // calculate if click happened on left or right half 
    var x = evt.pageX - $(this).offset().left 

    if (x > $(this).width()/2) { 
    //Right half 
    } else { 
    //Left half 
    } 
}); 

Answer 5

Fiddle क्योंकि आप जानते हैं - योलो!

$("#special").on('click', function(e){ 

    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; //You probably don't need Y. Unless you want to know height as well. 

    var width = $(this).width(), 
     where = width/2; 
    if(x > where){ 
     console.log("Click was on the right"); 
    } else { 
     console.log("Click was on the left"); 
    } 
}); 

Answer 6

शुद्ध जावास्क्रिप्ट समाधान- पार्टी के लिए देर से जुड़ना। लेकिन मेरे कोड का उपयोग करके recenlty यह किया। शरीर टैग या div पर इसे आईडी दें और जावास्क्रिप्ट फ़ंक्शन जैसे कॉल करें। id = "टीटी" onclick = "showCoords (घटना)"

function showCoords(event) { 
     var x = event.clientX; 
     var y = event.clientY; 
    // var coor = "X coords: " + x + ", Y coords: " + y; 
    // document.getElementById("demo").innerHTML = coor; 
     var ele = document.getElementById("tt"); 
     var width = ele.offsetWidth; 
     var height = ele.offsetHeight; 
     var half=(width/2); 
     if(x>half) 
     { 
      alert('right click'); 

     } 
     else 
     { 
      alert('left click'); 

     } 


    }