আপনি কীভাবে jQuery ব্যবহার করে ক্লিক করা মাউস বোতামটি পাবেন?
$('div').bind('click', function(){
alert('clicked');
});এটি ডান এবং বাম উভয় ক্লিক দ্বারা ট্রিগার করা হয়, ডান মাউস ক্লিক ধরতে সক্ষম হওয়ার উপায় কী? নীচের মতো কিছু উপস্থিত থাকলে আমি খুশি হব:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});উত্তর:
JQuery সংস্করণ 1.1.3 হিসাবে, event.whichস্বাভাবিক করে তোলে event.keyCodeএবং event.charCodeতাই আপনাকে ব্রাউজারের সামঞ্জস্যতার সমস্যাগুলি নিয়ে চিন্তা করতে হবে না। ডকুমেন্টেশন চালু আছেevent.which
event.which বাম, মাঝারি এবং ডান মাউস বোতামগুলির জন্য যথাক্রমে 1, 2 বা 3 দেবে:
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});contextmenu, এটি ব্রাউজারের স্থানীয় native নেটিভ জাভাস্ক্রিপ্টে আপনি oncontextmenuইভেন্টটি সংযুক্ত করতে পারেন ।
সম্পাদনা করুন : আমি এটিকে .on()jQuery 1.7 বা ততোধিক সময়ে গতিশীল যুক্ত উপাদানগুলির জন্য কাজ করতে পরিবর্তন করেছি :
$(document).on("contextmenu", ".element", function(e){
alert('Context Menu event has fired!');
return false;
});ডেমো: jsfiddle.net/Kn9s7/5
[মূল পোস্টের শুরু] এটি আমার পক্ষে কাজ করেছে:
$('.element').bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
}); যদি আপনি একাধিক সমাধানে থাকেন ^^
সম্পাদনা : টিম ডাউন একটি ভাল পয়েন্টটি এনেছে যে ঘটনাটি সর্বদা right-clickআগুন জ্বলে ওঠে না contextmenu, তবে প্রসঙ্গ মেনু কী টিপানো হয় (যা তর্কসাপেক্ষে এটির জন্য প্রতিস্থাপন right-click)
contextmenuঘটনা গুলি চালানো সবসময় বোঝায় না যে মাউসের ডান বোতামটি ক্লিক করা হয়েছিল। সঠিক পন্থাটি হ'ল মাউস ইভেন্টের বোতামের তথ্য ( clickএই ক্ষেত্রে)।
whichমাউস ইভেন্টগুলিতে ইভেন্ট অবজেক্টের সম্পত্তি পরীক্ষা করে আপনি সহজেই বলতে পারবেন কোন মাউস বোতামটি চাপানো হয়েছিল :
/*
1 = Left mouse button
2 = Centre mouse button
3 = Right mouse button
*/
$([selector]).mousedown(function(e) {
if (e.which === 3) {
/* Right mouse button was clicked! */
}
});e.button==2পরিবর্তে ব্যবহার করছে ।
event.buttonচেয়ে ক্রস ব্রাউজার ব্যবহার করা সমস্যা বেশি more ২০০৯ সালের জানুয়ারী থেকে এই নিবন্ধটি একবার দেখুন - unixpapa.com/js/mouse.htmlevent.whichevent.button
mouseupকোনও ব্যক্তিকে সত্যই আইটেম ক্লিক করেছে তা যাচাই করা কি ভাল হবে না ? অনেক সময় আছে যদি আমি ঘটনাক্রমে এমন কিছু ক্লিক করি যা আমি মাউস বোতামটি ধরে রেখে উপাদানটির বাইরে টেনে ক্লিক ক্লিক করতে পারি।
mouseupসম্ভবত একটি ভাল ইভেন্ট, এটি event.whichমাউস বোতাম ক্লিকের জন্য ব্যবহারের উদাহরণ মাত্র
আপনি এবং এছাড়াও bindকরতে পারেন :contextmenureturn false
$('selector').bind('contextmenu', function(e){
e.preventDefault();
//code
return false;
});ডেমো: http://jsfiddle.net/maniator/WS9S2/
অথবা আপনি একটি দ্রুত প্লাগইন তৈরি করতে পারেন যা একই কাজ করে:
(function( $ ) {
$.fn.rightClick = function(method) {
$(this).bind('contextmenu rightclick', function(e){
e.preventDefault();
method();
return false;
});
};
})( jQuery );ডেমো: http://jsfiddle.net/maniator/WS9S2/2/
.on(...)JQuery> = 1.7 ব্যবহার করে :
$(document).on("contextmenu", "selector", function(e){
e.preventDefault();
//code
return false;
}); //does not have to use `document`, it could be any container element.method.call(this, e);পরিবর্তে method();এই ভাবে, methodসঠিক মূল্য পায় thisএবং সঠিকভাবে এটি পাস ঘটনা বস্তুর হয়েছে।
$("#element").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Button");
}
else if(e.button == 2){
alert("Right Button");
}
});জিনিসগুলির বর্তমান অবস্থার জন্য আপডেট করুন:
var $log = $("div.log");
$("div.target").on("mousedown", function() {
$log.text("Which: " + event.which);
if (event.which === 1) {
$(this).removeClass("right middle").addClass("left");
} else if (event.which === 2) {
$(this).removeClass("left right").addClass("middle");
} else if (event.which === 3) {
$(this).removeClass("left middle").addClass("right");
}
});div.target {
border: 1px solid blue;
height: 100px;
width: 100px;
}
div.target.left {
background-color: #0faf3d;
}
div.target.right {
background-color: #f093df;
}
div.target.middle {
background-color: #00afd3;
}
div.log {
text-align: left;
color: #f00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>event.whichচালু করা হয়েছে যা ক্রস ব্রাউজারের সামঞ্জস্যতা দূর করে।
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});এখানে খুব ভাল উত্তর রয়েছে তবে আমি ব্যবহার করার সময় আইই 9 এবং আইই 9 9 এর মধ্যে একটি প্রধান পার্থক্য স্পর্শ করতে চাই event.button।
পুরাতন মাইক্রোসফ্টের event.buttonকোডগুলির জন্য উল্লেখ অনুযায়ী ডাব্লু 3 সি ব্যবহার করা কোডগুলির চেয়ে আলাদা। ডাব্লু 3 সি কেবল 3 টি মামলা বিবেচনা করে:
event.button === 1event.button === 3event.button === 2পুরানো ইন্টারনেট এক্সপ্লোরারগুলিতে তবে মাইক্রোসফ্ট চাপা বোতামটির জন্য কিছুটা ফ্লিপ করছে এবং সেখানে 8 টি মামলা রয়েছে:
event.button === 0বা 000 - তে কোনও বোতাম ক্লিক করা হয়নিevent.button === 1বা 001event.button === 2বা 010event.button === 3বা 011event.button === 4বা 100event.button === 5বা 101event.button === 6বা 110event.button === 7বা 111এটি তাত্ত্বিকভাবে এটি কীভাবে কাজ করা উচিত তা সত্ত্বেও, কোনও ইন্টারনেট এক্সপ্লোরার এক সাথে দু'বার বা তিনটি বোতামের একসাথে চাপার ক্ষেত্রে সমর্থন করে নি। আমি এটি উল্লেখ করছি কারণ ডাব্লু 3 সি স্ট্যান্ডার্ড এমনকি তাত্ত্বিকভাবে এটি সমর্থন করতে পারে না।
event.button === 0যা কোনও বাটন ক্লিক করা হয় তা পাবেন না, উজ্জ্বল আইইಠ_ಠ
আমার কাছে মনে হয় যে থিওলেজআইডিয়টের উত্তরটির সামান্য অভিযোজন পরিষ্কার হবে:
$('#element').bind('click', function(e) {
if (e.button == 2) {
alert("Right click");
}
else {
alert("Some other click");
}
}সম্পাদনা: JQuery একটি e.whichবৈশিষ্ট্য সরবরাহ করে, যথাক্রমে বাম, মাঝারি এবং ডান ক্লিকের জন্য 1, 2, 3 প্রদান করে। সুতরাং আপনি ব্যবহার করতে পারেif (e.which == 3) { alert("right click"); }
আরও দেখুন: "মিডল ক্লিক ব্যবহার করে অনক্লিক ইভেন্টটি ট্রিগার করা " এর উত্তরসমূহ
event.which === 1 এটি বাম ক্লিক ক্লিক করে (jQuery ব্যবহার করার সময়) নিশ্চিত করে।
তবে আপনার পরিবর্তনকারী কীগুলি সম্পর্কেও চিন্তা করা উচিত: ctrlcmdshiftalt
আপনি যদি কেবল সহজ, অবিস্মরণীয় বাম-ক্লিকগুলি ধরতে আগ্রহী হন তবে আপনি এই জাতীয় কিছু করতে পারেন:
var isSimpleClick = function (event) {
return !(
event.which !== 1 || // not a left click
event.metaKey || // "open link in new tab" (mac)
event.ctrlKey || // "open link in new tab" (windows/linux)
event.shiftKey || // "open link in new window"
event.altKey // "save link as"
);
};
$('a').on('click', function (event) {
if (isSimpleClick(event)) {
event.preventDefault();
// do something...
}
});আপনি যদি "আরও ভাল জাভাস্ক্রিপ্ট মাউস ইভেন্টগুলি" খুঁজছেন যা এর জন্য অনুমতি দেয়
এই ক্রস ব্রাউজারটি দেখে নিন সাধারণ জাভাস্ক্রিপ্ট যা উপরের ইভেন্টগুলিকে ট্রিগার করে এবং মাথা ব্যথার কাজটি সরিয়ে দেয়। এটি কেবল আপনার স্ক্রিপ্টের শিরোনামে অনুলিপি করুন এবং আটকে দিন বা এটি <head>আপনার নথির একটি ফাইলে অন্তর্ভুক্ত করুন । তারপরে আপনার ইভেন্টগুলিকে আবদ্ধ করুন, নীচের পরবর্তী কোড ব্লকটি দেখুন যা ইভেন্টগুলি ক্যাপচার এবং তাদেরকে অর্পিত ফাংশনগুলিকে ফায়ার করার এক জাকারি উদাহরণ দেখায়, যদিও এটি সাধারণ জাভাস্ক্রিপ্ট বাইন্ডিংয়ের সাথেও কাজ করে।
আপনার যদি এটি কাজ করতে আগ্রহী হয়, তবে জেএসফিডালটি দেখুন: https://jsfiddle.net/BNefn/
/**
Better Javascript Mouse Events
Author: Casey Childers
**/
(function(){
// use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};
/* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
function GetMouseButton(e) {
e = window.event || e; // Normalize event variable
var button = '';
if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
if (e.which == null) {
button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
} else {
button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
}
} else {
var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
switch (direction) {
case 120:
case 240:
case 360:
button = "up";
break;
case -120:
case -240:
case -360:
button = "down";
break;
}
}
var type = e.type
if(e.type == 'contextmenu') {type = "click";}
if(e.type == 'DOMMouseScroll') {type = "mousewheel";}
switch(button) {
case 'contextmenu':
case 'left':
case 'middle':
case 'up':
case 'down':
case 'right':
if (document.createEvent) {
event = new Event(type+':'+button);
e.target.dispatchEvent(event);
} else {
event = document.createEventObject();
e.target.fireEvent('on'+type+':'+button, event);
}
break;
}
}
addEvent(window, 'mousedown', GetMouseButton);
addEvent(window, 'mouseup', GetMouseButton);
addEvent(window, 'click', GetMouseButton);
addEvent(window, 'contextmenu', GetMouseButton);
/* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
addEvent(window, MouseWheelEvent, GetMouseButton);
})();উন্নত মাউস ক্লিক ইভেন্টগুলি উদাহরণ (সরলতার জন্য jquery ব্যবহার করে, তবে উপরের ক্রস ব্রাউজারে কাজ করবে এবং একই ইভেন্টের নামগুলিকে জ্বালিয়ে দেবে, IE নামের আগে এটি ব্যবহার করবে)
<div id="Test"></div>
<script type="text/javascript">
$('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:right',function(e){$(this).append(e.type+'<br />');})
.on('click',function(e){$(this).append(e.type+'<br />');})
.on('click:left',function(e){$(this).append(e.type+'<br />');})
.on('click:middle',function(e){$(this).append(e.type+'<br />');})
.on('click:right',function(e){$(this).append(e.type+'<br />');})
.on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
.on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:right',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
;
</script>এবং যারা নিখুঁত সংস্করণের প্রয়োজন তাদের জন্য ...
!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();$("body").on({
click: function(){alert("left click");},
contextmenu: function(){alert("right click");}
});$(document).ready(function () {
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origwidthFrame = frame.width();
var origPosYGrip = $("#frame-grip").offset().top;
var origPosXGrip = $("#frame-grip").offset().left;
var gripHeight = $("#frame-grip").height();
var gripWidth = $("#frame-grip").width();
$("#frame-grip").mouseup(function (e) {
resizing = false;
});
$("#frame-grip").mousedown(function (e) {
resizing = true;
});
document.onmousemove = getMousepoints;
var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
function getMousepoints() {
if (resizing) {
var MouseBtnClick = event.which;
if (MouseBtnClick == 1) {
scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
mousex = event.clientX + scrollLeft;
mousey = event.clientY + scrollTop;
frame.height(mousey);
frame.width(mousex);
}
else {
resizing = false;
}
}
return true;
}
});Jquery সঙ্গে আপনি ব্যবহার করতে পারেন event object type
jQuery(".element").on("click contextmenu", function(e){
if(e.type == "contextmenu") {
alert("Right click");
}
});JQuery ছাড়া এটি করার একটি উপায় আছে!
এটা পরীক্ষা করো:
document.addEventListener("mousedown", function(evt) {
switch(evt.buttons) {
case 1: // left mouse
case 2: // right mouse
case 3: // middle mouse <- I didn't tested that, I just got a touchpad
}
});$.fn.rightclick = function(func){
$(this).mousedown(function(event){
if(event.button == 2) {
var oncontextmenu = document.oncontextmenu;
document.oncontextmenu = function(){return false;};
setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
func(event);
return false;
}
});
};
$('.item').rightclick(function(e){
alert("item");
}); যারা যারা তারা যদি বা ব্যবহার করা উচিত নয় হতাশ হয় event.whichমধ্যে ভ্যানিলা জাতীয় বা কৌণিক : এখন এটা অবচিত তাই ব্যবহার পছন্দ event.buttonsপরিবর্তে।
দ্রষ্টব্য: এই পদ্ধতিটি এবং (মাউসডাউন) ইভেন্ট সহ:
এবং (মাউসআপ) ইভেন্টটি একই সংখ্যার পরিবর্তে 0 পরিবর্তিত করবে না ।
সূত্র: https://developer.mozilla.org/en-US/docs/Web/API/ মাউস এভেন্ট / বাটন
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});