JQuery .on এবং হোভার ব্যবহার করা কি সম্ভব?

Question

আমার এমন একটি রয়েছে <ul>যা প্রাথমিক পৃষ্ঠা লোডের পরে জাভাস্ক্রিপ্টে জনবহুল। আমি বর্তমানে এবং .bindসঙ্গে ব্যবহার করছি ।mouseovermouseout

প্রকল্পটি সবেমাত্র jQuery 1.7 এ আপডেট হয়েছে যাতে আমার কাছে ব্যবহারের বিকল্প রয়েছে .onতবে আমি এটি দিয়ে কাজ করতে পারব বলে মনে হয় না hover। এটি ব্যবহার করা সম্ভব .onসঙ্গে hover?

সম্পাদনা করুন : যে উপাদানগুলিতে আমি আবদ্ধ করছি সেগুলি দস্তাবেজ লোড হওয়ার পরে জাভাস্ক্রিপ্ট দিয়ে লোড করা হবে। এজন্যই আমি ব্যবহার করছি onএবং শুধু নয় hover।

Comments

নীচে একটি মন্তব্য থেকে - অন ​​() এ হোভার ইভেন্ট সমর্থন jQuery 1.8 এ অবমূল্যায়ন করা হয়েছিল এবং jQuery 1.9 এ সরানো হয়েছিল । ক্যালবেথব্রুয়ের পরামর্শ অনুসারে mouseenterএবং এর সমন্বয় দিয়ে চেষ্টা করুন mouseleave।

— সেক্সিবিস্ট

Answer 1

( জাভাস্ক্রিপ্টে জনবহুল উপাদানগুলির সাথে আপনার যদি ব্যবহারের প্রয়োজন হয় তবে এই উত্তরের শেষ সম্পাদনাটি দেখুন.on() )

জাভাস্ক্রিপ্ট ব্যবহার করে জনবহুল নয় এমন উপাদানগুলির জন্য এটি ব্যবহার করুন:

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()এটির নিজস্ব হ্যান্ডলার রয়েছে: http://api.jquery.com/hover/

আপনি যদি একাধিক জিনিস করতে চান তবে .on()হ্যান্ডলারে তাদের মতো চেইন করুন :

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

নীচে প্রদত্ত জবাব অনুসারে আপনি এর hoverসাথে ব্যবহার করতে পারেন .on()তবে:

যদিও নতুন কোডের জন্য দৃ strongly়ভাবে নিরুৎসাহিত করা হয়েছে, আপনি সিউডো-ইভেন্ট-নামটি দেখতে পাবেন "হোভার" স্ট্রিংয়ের জন্য শর্টহ্যান্ড হিসাবে ব্যবহৃত "মাউসেন্টার মাউসলেভ"। এটি two দুটি ইভেন্টের জন্য একটি একক ইভেন্ট হ্যান্ডলার সংযুক্ত করে এবং হ্যান্ডলারের ইভেন্টটি মাউসেন্টার বা মাউসলেভ কিনা তা নির্ধারণের জন্য ইভেন্ট.প্রকার পরীক্ষা করতে হবে। "হোভার" সিউডো-ইভেন্ট-নামটিকে .হোভার () পদ্ধতির সাথে বিভ্রান্ত করবেন না, যা এক বা দুটি ফাংশন গ্রহণ করে।

এছাড়াও, এটি ব্যবহার করার জন্য কোনও কার্যকারিতা সুবিধা নেই এবং এটি কেবল ব্যবহার mouseenterবা ব্যবহারের চেয়ে বেশি বিশাল mouseleave। আমি যে উত্তরটি দিয়েছি তার জন্য কম কোড প্রয়োজন এবং এটির মতো কিছু অর্জনের সঠিক উপায়।

সম্পাদনা

এই প্রশ্নের উত্তরের পরে বেশ কিছুক্ষণ হয়েছে এবং মনে হচ্ছে এটি কিছুটা আকর্ষণীয় হয়েছে। উপরের কোডটি এখনও দাঁড়িয়ে আছে, তবে আমি আমার মূল উত্তরে কিছু যুক্ত করতে চাইনি।

যদিও আমি ব্যবহার করতে পছন্দ করি mouseenterএবং mouseleave(কোডে কী চলছে তা বুঝতে আমাকে সহায়তা করে) .on()এটির সাথে নিম্নলিখিতটি লেখার মতোইhover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

যেহেতু মূল প্রশ্নটি জিজ্ঞাসা করেছিল যে তারা কীভাবে এটির on()সাথে সঠিকভাবে ব্যবহার করতে পারে hover(), তাই আমি ভেবেছিলাম যে আমি এর ব্যবহারটি সংশোধন করব on()এবং hover()সেই সময় কোডটি যুক্ত করার প্রয়োজন মনে করি না ।

ডিসেম্বর 11, 2012 সম্পাদনা করুন

প্রশ্নে জাভাস্ক্রিপ্ট ব্যবহার করে জনবসতিযুক্ত .on()হলে কীভাবে কাজ করা উচিত তা নীচে নীচে সরবরাহ করা কয়েকটি নতুন উত্তর div। উদাহরণস্বরূপ, আসুন যাক আপনি divjQuery এর .load()ইভেন্টগুলি ব্যবহার করে একটি জনপ্রিয় করুন :

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

উপরের কোডটি .on()দাঁড়াবে না। পরিবর্তে, আপনার এই কোডটি সামান্য পরিবর্তন করা উচিত:

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

এই কোডটি কোনও .load()ঘটনা ঘটার পরে জাভাস্ক্রিপ্ট দ্বারা জনিত উপাদানগুলির জন্য কাজ করবে । আপনার যুক্তিটি যথাযথ নির্বাচকের কাছে পরিবর্তন করুন।

Comments

@ স্কট, দয়া করে নোট করুন যে জোনমিসিন্তোষের উত্তর আমার প্রশ্নের উত্তর দেয় না কারণ তিনি কেবল হোভার কার্যকারিতার অর্ধেক ব্যবহার করছেন।

— রাইয়ের

এটি ডিওমে যুক্ত করা উপাদানগুলির পক্ষে কাজ করে না। @Nik Chankov নীচে তুলে ধরা পয়েন্ট হিসাবে, এখানে .on সঠিক ব্যবহার () সংযুক্ত করার একাধিক হ্যান্ডেলার জন্য stackoverflow.com/questions/8608145/...

— soupy1976

@ soupy1976 আমার উত্তর সম্পাদনা করেছে, এটি এখন জাভাস্ক্রিপ্ট দ্বারা জনবহুল অ্যাকাউন্টগুলিতে নেয়।

— শেফেন

@ শেথেনম্যালেনো - ঠিক, এবং আপনার .on()সমাধানটি সিউডো হোভার ইভেন্টটি সরিয়ে এবং আসলগুলি ব্যবহার করে কাজ করে। আমি তার জন্য প্রথম যেটিকে আপনি মাউসেন্টার / মাউসলেভ +1 দিয়ে চিত্রিত করেছেন তা পছন্দ করি

— মার্ক

এই সম্পাদনাটি আমার ভোটটিকে একটি ডাউন-ভোট থেকে একটি আপ-ভোটে বদলেছে, ভাল খেলেছে, শেথেন, ভাল খেলেছে!

— শান ক্যান্ডেল

Answer 2

প্রশ্নটির অনুরোধ হিসাবে ডকুমেন্টটি লোড হওয়ার পরে তৈরি হওয়া বস্তুর উপর / আউট তৈরির সময় এই সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করেনি। আমি জানি এই প্রশ্নটি পুরানো তবে এখনও যারা খুঁজছেন তাদের কাছে আমার একটি সমাধান আছে:

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

এটি নির্বাচককে ফাংশনগুলিকে আবদ্ধ করবে যাতে ডকুমেন্ট প্রস্তুত হওয়ার পরে তৈরি করা এই নির্বাচকের সাথে অবজেক্টগুলি এটিকে কল করতে সক্ষম হবে।

Comments

এই এক সঠিক সমাধান আছে stackoverflow.com/questions/8608145/...

— Nik Chankov

এইভাবে আমি এটিও কাজ করতে পেরেছি, আমি নির্বাচিতকে নির্বাচিত করার আগে গ্রহণযোগ্য উত্তরটি খুঁজে পেলাম। .On (।) ইভেন্টের পরে কোনও কাজ করেন নি তবে এটি করে।

— ম্যাটপ

@ ক্যালবেথব্রিউয়ার আমার উত্তর সম্পাদনা করেছে, এটি এখন জাভাস্ক্রিপ্টের দ্বারা জনবহুল অ্যাকাউন্টগুলিকে বিবেচনা করে।

— শেফেন

এখানে ব্যবহার mouseoverএবং mouseoutইভেন্টগুলির ফলে কোডটি অবিচ্ছিন্নভাবে আগুন লাগায় কারণ ব্যবহারকারী মৌলটির ভিতরে মাউসটি ঘুরিয়ে দেয়। আমি মনে করি mouseenterএবং mouseleaveআরও উপযুক্ত কারণ এটি প্রবেশের পরে কেবলমাত্র আগুন লাগবে।

— উদ্যোক্তা 25'13

মূল উপাদান হিসাবে নথি ব্যবহার করা ভাল অনুশীলন নয়, কারণ এর কার্যক্ষমতা ক্ষুধার্ত। আপনি দস্তাবেজটি পর্যবেক্ষণ করছেন, যখন লোড () সহ আপনি বেশিরভাগ সময় ওয়েবসাইটের একটি অংশ (f.ex. # কনটেন্ট) চালিত করেন। সুতরাং এটি উপাদানকে সংকুচিত করার চেষ্টা করা আরও ভাল,

— হেরফের হয়েছে

Answer 3

আপনার বাকি জাভাস্ক্রিপ্ট কেমন দেখাচ্ছে তা আমি নিশ্চিত নই, তাই কোনও হস্তক্ষেপ আছে কিনা তা আমি বলতে পারব না। তবে .hover()ইভেন্ট হিসাবে ঠিক কাজ করে .on()।

$("#foo").on("hover", function() {
  // disco
});

আপনি যদি এর ইভেন্টগুলি ব্যবহার করতে সক্ষম হতে চান তবে ইভেন্টটি থেকে ফিরে আসা জিনিসটি ব্যবহার করুন:

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

Comments

কীভাবে এটি হোভার ব্যবহারের জন্য / বন্ধ করার জন্য পৃথক ফাংশন পরিচালনা করবে? উদা: $('#id').hover(function(){ //on }, function(){ //off});

— রাইয়ের

আমার কাছে এই প্রয়োজন হয় না .. আপনি ব্যবহার করতে প্রয়োজন হবে না .on()সঙ্গে hoverযখন আপনি ঠিক যেমন সহজে পরিত্রাণ পেতে পারেন .on()এবং সঙ্গে এটি প্রতিস্থাপন .hover()ফাংশন এবং একই ফলাফল পেতে। কম কোড লেখার বিষয়ে jQuery নয় কি ??

— শেফেন

@Toast এটা না দেখতে নীচের আমার উত্তর সম্পাদন করতে কিভাবে দেখতে mouseenterএবং mouseleaveসঙ্গে ফাংশন.on()

— Sethen

উভয় ইভেন্টের ব্যবহার অন্তর্ভুক্ত করার জন্য আমি আমার উত্তর আপডেট করেছি। এটি শেথেনের উত্তরের মতোই কাজ করে তবে এর আলাদা স্বাদ রয়েছে।

— জন ম্যাকআইনটোশ

hoverইভেন্টের সমর্থন On()jQuery 1.8 এ অবচয় করা হয়েছিল এবং jQuery 1.9-এ সরানো হয়েছিল।

— কোডিং গেছে

Answer 4

jQuery হোভার ফাংশন মাউসওভার এবং মাউসআউট কার্যকারিতা দেয়।

$ (নির্বাচক) .hover (inFunction, outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

সূত্র: http://www.w3schools.com/jquery/event_hover.asp

Comments

অবশ্যই কাজ করে। আপনি একটি ডাউন ভোট পেয়েছেন কারণ কিছু লোক ডাম্প!

— করিম

Answer 5

সবেমাত্র ওয়েব থেকে সার্ফ করেছিলাম এবং অনুভব করেছি যে আমি অবদান রাখতে পারি। আমি লক্ষ্য করেছি যে @ ক্যালথেব্রিউয়ার পোস্ট করা উপরের কোডটির সাহায্যে নির্বাচককে একাধিক কল এবং উদাহরণস্বরূপ অপ্রত্যাশিত আচরণ হতে পারে: -

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

এই কোলাহলটি http://jsfiddle.net/TWskH/12/ আমার বক্তব্য চিত্রিত করে। প্লাগিনগুলির মতো অ্যানিমেটিক উপাদানগুলি যখন আমি পেয়েছি যে এই একাধিক ট্রিগারগুলি অনিচ্ছাকৃত আচরণের ফলস্বরূপ যার ফলে অ্যানিমেশন বা কোডের প্রয়োজনের চেয়ে বেশি বলা হয়।

আমার পরামর্শটি কেবল মাউসেন্টার / মাউসলেভ দিয়ে প্রতিস্থাপন করতে হবে: -

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

যদিও এটি আমার অ্যানিমেশনের একাধিক উদাহরণকে কল করা থেকে বাধা দিয়েছে, শেষ পর্যন্ত আমি মা-বাবার / মাউসলেভটি দিয়েছিলাম যখন আমার পিতামাতার সন্তানদের কবে আটকানো হচ্ছে তা নির্ধারণ করার প্রয়োজন হয়েছিল।

Comments

এই উত্তরটি দস্তাবেজ নির্বাচকের জন্য হোভার ইভেন্ট যুক্ত করার জন্য কার্যত সমাধান সরবরাহ করেছে provided +1

— ধনী ডেভিস

Answer 6

আপনি ব্যবহার করতে পারেন .on()সঙ্গে hoverকরছেন কি অতিরিক্ত নোট অধ্যায় বলছেন দ্বারা:

যদিও নতুন কোডের জন্য দৃ strongly়ভাবে নিরুৎসাহিত করা হয়েছে, আপনি সিউডো-ইভেন্ট-নামটি দেখতে পাবেন "হোভার" স্ট্রিংয়ের জন্য শর্টহ্যান্ড হিসাবে ব্যবহৃত "মাউসেন্টার মাউসলেভ"। এটি two দুটি ইভেন্টের জন্য একটি একক ইভেন্ট হ্যান্ডলার সংযুক্ত করে এবং হ্যান্ডলারের ইভেন্টটি মাউসেন্টার বা মাউসলেভ কিনা তা নির্ধারণের জন্য ইভেন্ট.প্রকার পরীক্ষা করতে হবে। "হোভার" সিউডো-ইভেন্ট-নামটিকে .হোভার () পদ্ধতির সাথে বিভ্রান্ত করবেন না, যা এক বা দুটি ফাংশন গ্রহণ করে।

এটি নিম্নলিখিত করা হবে:

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

---

সম্পাদনা (jQuery 1.8+ ব্যবহারকারীদের জন্য নোট):

JQuery 1.8 এ অবমানিত, 1.9-এ সরানো হয়েছে: "মাওসেটর মাউসলেভ" স্ট্রিংয়ের শর্টহ্যান্ড হিসাবে ব্যবহৃত নাম "হোভার"। এটি two দুটি ইভেন্টের জন্য একটি একক ইভেন্ট হ্যান্ডলার সংযুক্ত করে এবং হ্যান্ডলারের ইভেন্টটি মাউসেন্টার বা মাউসলেভ কিনা তা নির্ধারণের জন্য ইভেন্ট.প্রকার পরীক্ষা করতে হবে। "হোভার" সিউডো-ইভেন্ট-নামটিকে .হোভার () পদ্ধতির সাথে বিভ্রান্ত করবেন না, যা এক বা দুটি ফাংশন গ্রহণ করে।

Comments

এটি কেবল আরও কাজ যখন এটি সহজেই ব্যবহার করে করা যায় mouseenterএবং mouseleave... আমি জানি, এটি ওপির মূল প্রশ্নের উত্তর দেয় না, তবে এখনও hoverএইভাবে ব্যবহার করা বুদ্ধিমানের কাজ নয়।

— শেফেন

এইভাবে এটি করার ফলে জিক্যুরি টিম আপনাকে ওপির প্রশ্ন অনুসারে এটি করার পরামর্শ দেয় follows যাইহোক, jQuery দলটি পরামর্শ হিসাবে, এটি নতুন কোডের জন্য দৃ strongly়ভাবে নিরুৎসাহিত। তবে এটি এখনও ওপি-র প্রশ্নের সঠিক উত্তর

— কোড মেভেরিক

@ স্কট - আপনি আমার চেয়ে দ্রুত ছিলেন :-) @ শেথেন - উভয় উপায়েই কাজ করবে, তবে প্রশ্নকর্তা এর সাথে কার্যকারিতার জন্য অনুরোধ করেছেন .hover()।

— জন ম্যাকআইনটোশ

এটা ঠিক যে তাই হয়, কিন্তু এখনও, আমি ওপি একটি জন্য একটি সমাধান খুঁজছেন ছিল মনে mouseenterএবং mouseleaveবরং এটা দিয়ে কাজ উপার্জন চেয়ে hover। hoverপারফরম্যান্সের কারণে যদি ব্যবহার করার কোনও আসল কারণ না থাকে তবে নতুন কোডের জন্য যখন এটি দৃ strongly়ভাবে নিরুৎসাহিত করা হয় তখন কেন এটি ব্যবহার করবেন?

— শেফেন

hoverইভেন্টের সমর্থন On()jQuery 1.8 এ অবচয় করা হয়েছিল এবং jQuery 1.9-এ সরানো হয়েছিল।

— কোডিং গেছে

Answer 7

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Answer 8

আপনি এক বা একাধিক ইভেন্টের ধরণের স্থান দিয়ে আলাদাভাবে সরবরাহ করতে পারেন।

তাই hoverসমান mouseenter mouseleave।

এটি আমার আধিপত্য

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Comments

আমি এই পরামিতি অবমূল্যায়ন করার জন্য জিকিউ এর সিদ্ধান্ত পছন্দ করি। পূর্ববর্তী সংস্করণ 1.8, নেমস্পেস হিসাবে ঘোরাতে ব্যবহার করে ডিওএম ইভেন্টের সাথে মিল নেই, হোভার, কোনও সম্পর্ক নেই।

— জিম 22150

Answer 9

অন্য ইভেন্টে শর্ত হিসাবে এটির প্রয়োজন হলে আমি এটি এইভাবে সমাধান করেছি:

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

তারপরে অন্য একটি ইভেন্টে, আপনি সহজেই এটি ব্যবহার করতে পারেন:

 if ($(this).data('hover')){
      //...
 }

(আমি is(':hover')এটি সমাধানের জন্য কিছু ব্যবহার করে দেখছি But তবে এটি (এখনও) একটি বৈধ jQuery নির্বাচনকারী নয় এবং সমস্ত সামঞ্জস্যপূর্ণ ব্রাউজারে কাজ করে না)

Answer 10

JQuery প্লাগইন হোভারআইন্টেন্ট http://cherne.net/brian/resources/jquery.hoverIntent.html এখানে তালিকাভুক্ত নিষ্পাপ পদ্ধতির চেয়ে অনেক বেশি এগিয়ে যায়। তারা অবশ্যই কাজ করার সময়, তারা ব্যবহারকারীরা যেভাবে প্রত্যাশা করে তা অগত্যা আচরণ করবে না।

হোভারআইন্টেন্ট ব্যবহারের সবচেয়ে শক্তিশালী কারণ হ'ল সময়সীমা বৈশিষ্ট্য। এটি আপনাকে মেনু বন্ধ হতে বাধা দেওয়ার মতো কাজ করতে দেয় কারণ কোনও ব্যবহারকারী তাদের পছন্দসই আইটেমটি ক্লিক করার আগে ডান বা বাম দিকে কিছুটা দূরে তাদের মাউস টানেন। এটি কোনও ব্যারেজে হোভার ইভেন্টগুলি সক্রিয় না করার জন্য ক্ষমতা সরবরাহ করে এবং ফোকাসিত হোভারিংয়ের জন্য অপেক্ষা করে।

ব্যবহারের উদাহরণ:

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

এর আরও ব্যাখ্যা https://stackoverflow.com/a/1089381/37055 এ পাওয়া যাবে