উপাদানটি কীভাবে ক্লিক করা যায় (পুরো ডকুমেন্টের জন্য)?

150

আমি ক্লিক করেছি এমন একটি HTML নথিতে আমি বর্তমান উপাদানটি (যে উপাদানই হোক না কেন) পেতে চাই। আমি ব্যাবহার করছি:

$(document).click(function () {
    alert($(this).text());
});

তবে খুব আশ্চর্যের সাথে আমি পুরো (!) নথির পাঠ্য পেয়েছি, ক্লিক করা উপাদান নয়।

আমি ক্লিক করা কেবলমাত্র উপাদানটি কীভাবে পাবেন?

উদাহরণ

<body>
    <div class="myclass">test</div>
    <p>asdfasfasf</p>
</body>

যদি আমি "পরীক্ষা" পাঠ্যটিতে ক্লিক করি তবে আমি $(this).attr("myclass"jQuery এর সাথে বৈশিষ্ট্যটি পড়তে সক্ষম হতে চাই )।

— user1145216
সূত্র

2

হ্যান্ডলার ফাংশনটি এখানে যুক্ত করা হয় এমন উপাদানটির স্কোপে কার্যকর করে the targetইভেন্ট ইভেন্টটির সম্পত্তি পেতে আপনার প্রয়োজন হবে ।

— বার্গি

238

আপনার event.targetমূল উপাদানটি যা ইভেন্টটি মূলত ট্রিগার করেছিল তা ব্যবহার করতে হবে । thisআপনার উদাহরণ কোডে বোঝায় document।

JQuery এ, এটি ...

$(document).click(function(event) {
    var text = $(event.target).text();
});

JQuery ছাড়া ...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

এছাড়াও, আপনি যদি আপনার attachEvent()পরিবর্তে ব্যবহার করেন এমন <আই 99 সমর্থন করার প্রয়োজন হয় তা নিশ্চিত করুন addEventListener()।

— Alex
সূত্র

1

আমি দেখতে পেলাম যে উপাদানটি ফিরে এসেছে সে কিছুটা আলাদা ছিল, তাই আমি if(event.target === myjQueryDivElement)করতে পারি না: if(event.target.hasClass('mydivclass'))যেখানে মাইডিভক্লাস ছিল আমার শ্রেণীর একটি শ্রেণি।

— redfox05

আমি সাফারিতে প্রায় 3 দিনের জন্য একটি কাজ খুঁজছিলাম এবং অবশেষে আমি এই পোস্টে হোঁচট খেয়েছি। আপনি ছেলেরা ধন্যবাদ রক

— রেমন্ড ফেলিসানো

3

@ আলেক্স হে, এটা কি হওয়া উচিত || target.innerText?

— জেভেগেনি স্মিমনভ

30

event.target পেতে element

window.onclick = e => {
    console.log(e.target);  // to get the element
    console.log(e.target.tagName);  // to get the element tag name alone
}

ক্লিক করা উপাদান থেকে পাঠ্য পেতে

window.onclick = e => {
    console.log(e.target.innerText);
}

— bhv
সূত্র

26

বডি ট্যাগের ভিতরে নিম্নলিখিতটি ব্যবহার করুন

<body onclick="theFunction(event)">

তারপরে আইডি পেতে নিম্নলিখিত ফাংশনটি জাভাস্ক্রিপ্টে ব্যবহার করুন

<script>
function theFunction(e)
{ alert(e.target.id);}

— মালেক তুবাইসাহাত
সূত্র

7

আপনি এখানে লক্ষ্য উপাদানটি খুঁজে পেতে পারেন event.target:

$(document).click(function(event) {
    console.log($(event.target).text());
});

তথ্যসূত্র:

http://api.jquery.com/event.target/

— পিটার-পল ভ্যান জেমার্ডেন
সূত্র

3

ব্যবহার করুন delegateএবং event.target। delegateএকটি উপাদান শোনার, এবং হ্যান্ডেল করার জন্য, শিশু উপাদানগুলির ইভেন্টগুলিকে ইভেন্ট বুদবুদ করার সুবিধা গ্রহণ করে। ইভেন্টের উত্স targetযে eventবস্তুর প্রতিনিধিত্ব করে সেই বস্তুর জিকিউ-নরমালাইজড সম্পত্তি ।

$(document).delegate('*', 'click', function (event) {
    // event.target is the element
    // $(event.target).text() gets its text
});

ডেমো: http://jsfiddle.net/xXTbP/

— JAAulde
সূত্র

2

এই দিন এবং বয়স উল্লেখ করা on()উচিত যা সুপারিশ করা উচিত delegate()। এছাড়াও, documentসম্ভবত ব্যবহার না করার একমাত্র ব্যতিক্রম delegate()/ on()যেহেতু তারা যাইহোক হ্যান্ডলিংয়ের সর্বোচ্চ পয়েন্টে বুদবুদ করছে।

— আলেক্স

ভাল কল. আমি আমার দিনের চাকরিতে অতি সাম্প্রতিক jQuery এ আপগ্রেড করেছি না, তাই onআমার মন কে পিছলে যায়।

— জেএএলডে

1

@ অ্যালেক্স, যেহেতু ঘটনাগুলি যেভাবেই বুঁদ হয়ে উঠছে, এবং যেহেতু হ্যান্ডলারটি নির্বিশেষে চলতে হবে, এটি কি ব্যতিক্রম নয়? এটা ঠিক যে সব কিছু পৃথক নয়। আমার মনে delegateহয় ফিল্টারিং ওভারহেডের বিবেচনা করা উচিত, যদিও ...

— জএএলডে

2

আমি জানি এই পোস্টটি আসলেই পুরানো তবে কোনও আইডিটির রেফারেন্সে কোনও উপাদানটির বিষয়বস্তু পেতে, আমি এটিই করব:

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}

— Aft3rL1f3
সূত্র

1

$(document).click(function (e) {
    alert($(e.target).text());
});

-2

আপনি এখানে যে কোনও ক্লাস, আইডি, টাইপ ইত্যাদির ট্যাগগুলিকে সহজেই টার্গেট করতে পারেন এমন একটি সমাধান এখানে jQuery নির্বাচনকারী ব্যবহার করে's

jQuery('div').on('click', function(){
    var node = jQuery(this).get(0);
    var range = document.createRange();
    range.selectNodeContents( node );
    window.getSelection().removeAllRanges();
    window.getSelection().addRange( range );
});

— হেনরি লকেট
সূত্র