লক্ষ্য উপাদানটিতে ক্লিকের স্থানাঙ্ক পেতে কীভাবে jQuery ব্যবহার করে

109

আমার এইচটিএমএল উপাদানটির জন্য আমার নীচের ইভেন্ট হ্যান্ডলারটি রয়েছে

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

ক্লিক করার সময় আমার # সিক-বারে মাউসের অবস্থানটি সন্ধান করা উচিত। আমি ভাবতাম উপরের কোডটি কাজ করা উচিত তবে এটি ভুল ফলাফল দেয়

— রোমান
সূত্র

4

উপাদান, ভিউপোর্ট বা পুরো ডকুমেন্টের সাথে সম্পর্কিত কি?

— জেমস

আমি এটিকে e.layerX - e.getget.offsetLeft এবং ওপ্রিয়ার জন্য সবেমাত্র e.offsetX ব্যবহার করে কাজ করেছি

— রোমান

যদি আপনি এটি কোনও প্রতিক্রিয়াশীল সাইটে পেতে চান। এই নিবন্ধটি ব্যবহার করে দেখুন, আপনি প্রতিক্রিয়াশীল সাইটগুলিতেও এটি পেতে পারেন। kvcodes.com/2014/03/…

— Kvvaradha

235

আপনি কি relativeমৌলিক (বা) মাউস পয়েন্টার অবস্থানের জন্য (অথবা) মাউস পয়েন্টার অবস্থানের জন্য

এই ডেমোটি ব্যবহার করে চেষ্টা করছেন: http://jsfiddle.net/AMsK9/

সম্পাদনা করুন:

1) event.pageX, event.pageYআপনাকে মাউসের অবস্থান আপেক্ষিক দলিল দেয়!

উল্লেখ : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): এটি একটি উপাদান অফসেট অবস্থান দেয়

তথ্যসূত্র : http://api.jquery.com/offset/

3) position(): এটি আপনাকে একটি উপাদান সম্পর্কিত আপেক্ষিক অবস্থান দেয় যেমন,

বিবেচনা করুন একটি উপাদান অন্য উপাদান মধ্যে এম্বেড করা হয়

উদাহরণ :

<div id="imParent">
   <div id="imchild" />
</div>

তথ্যসূত্র : http://api.jquery.com/position/

এইচটিএমএল

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

জাভাস্ক্রিপ্ট

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});

9

উদাহরণগুলির জন্য +1 ... একটি নোট যদিও আমি কোডটি এখানে যুক্ত করব, যদি আপনার লিঙ্কটি এই ভবিষ্যতে অকেজো হয়ে যায় তবে আমি প্রত্যেকটির জন্য কোড এবং একটি সংক্ষিপ্ত বিবরণ এখানে

— রেখেছি

2

এর ক্ষেত্রে করার একটি সহজ উপায় রয়েছে '#B': e.offsetXএবং e.offsetY। আমার ধারণা আপনি এটি সম্পাদনা করতে চান আমি ইতিমধ্যে ফিজল আপডেট এখানে । আমি পোস্টটি ধন্যবাদ এই সমাধানটি পেয়েছি, তাই ধন্যবাদ।

— টোটো_টিকো

ধন্যবাদ, কারণ আমি ব্যক্তিগতভাবে অফসেট () এবং অবস্থান (), যে কেউ প্রয়োজন আরও ব্যাখ্যা জন্য সঙ্গে গুলিয়ে ফেলা পড়তে পারে stackoverflow.com/questions/3202008/... সুবিধার খাতিরে

— simongcc

আমার নীচের অংশে একটি উপাদান স্থির ছিল - এটি 100% প্রস্থ ছিল, সুতরাং আমি তার পরিবর্তে উইন্ডো প্রস্থকে পোস্টএক্সএক্স হিসাবে ব্যবহার করেছি - সুতরাং আমি নির্ধারণ করতে সক্ষম হয়েছিল যে কোনও ব্যবহারকারী একটি "এক্স" তৈরি করেছিলেন যা একটি দিয়ে তৈরি হয়েছিল: সিএসএস বিধি পরে উপরের ডানদিকে ছিল।

— amurrell

দুর্দান্ত উদাহরণ, তবে। অবস্থান () এবং। অফসেট () এর মধ্যে পার্থক্য কী তা স্পষ্ট নয়। আপনার # সি এলেন্টকে কিছু অনুকরণীয় অবস্থান সহ কিছু প্যারেন্ট ডিভের মধ্যে আবদ্ধ করা উচিত এটি দেখতে যে # সি-তে ক্লিক করা আপনার মাউস অবস্থানটিকে এমন উপাদানটির ভিতরে ফিরিয়ে দেয় যা সম্ভবত # সি এর প্যারেন্ট, যা সম্ভবত কমপক্ষে ঘন ঘন দরকারী।

— amik

15

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});

— নিসার
সূত্র

3

এটা চেষ্টা কর:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

এখানে আপনি ডেমো দিয়ে আরও তথ্য সন্ধান করতে পারেন

— Krunal
সূত্র

1

শতাংশে:

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});

— l2aelba
সূত্র

1

তাহলে MouseEvent.offsetX হয় সমর্থিত (সমস্ত প্রধান ব্রাউজার আসলে এটা সমর্থন) আপনার ব্রাউজার দ্বারা, jQuery এর ইভেন্ট বস্তুর এই সম্পত্তি উপস্থিত থাকবে।

মাউসএভেন্ট.অফসেটএক্স কেবলমাত্র পঠনযোগ্য বৈশিষ্ট্য সেই ইভেন্ট এবং টার্গেট নোডের প্যাডিং প্রান্তের মধ্যে মাউস পয়েন্টারের এক্স কোডিনেটে অফসেট সরবরাহ করে।

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— মেমেট ওলসেন
সূত্র

0

এখানে লিঙ্ক বিবরণ লিখুন দেখুন

এইচটিএমএল

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

CSS

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jQuery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

— AirBlack
সূত্র