جافا سكريبت:تحقق مما إذا كان زر الماوس لأسفل ؟

Question

هل هناك طريقة لاكتشاف ما إذا كان على زر الماوس حاليا في جافا سكريبت ؟

أنا أعرف عن "mousedown" الحدث, ولكن هذا ليس ما أريد.بعض الوقت بعد الضغط على زر الماوس ، أريد أن تكون قادرة على الكشف عن إذا كان لا يزال الضغط إلى أسفل.

هل هذا ممكن ؟

Answer 1

فيما يتعلق باكس' الحل:أنها لا تعمل إذا نقر المستخدم على أكثر من زر واحد عمدا أو عن طريق الخطأ.لا تسألني كيف أعرف :-(.

الكود الصحيح ينبغي أن يكون مثل هذا:

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

مع اختبار مثل هذا:

if(mouseDown){
  // crikey! isn't she a beauty?
}

إذا كنت تريد أن تعرف ما يتم الضغط على زر مستعدة لتقديم mouseDown مجموعة من العدادات الاعتماد عليها بشكل منفصل عن أزرار منفصلة:

// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

الآن يمكنك أن تحقق ما أزرار الضغط بالضبط:

if(mouseDownCount){
  // alright, let's lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

الآن حذر من أن رمز أعلاه سوف تعمل فقط على المتصفحات القياسية المتوافقة التي تمر أنت على زر رقم بدءا من 0.أي يستخدم قناع بت حاليا الضغط على الأزرار:

• 0 "لا شيء يتم الضغط"
• 1 على اليسار
• 2 صحيح
• 4 الأوسط
• و أي مزيج من أعلاه ، على سبيل المثال ، 5 على يسار + الوسط

لذلك ضبط التعليمات البرمجية الخاصة بك وفقا لذلك!أترك باعتبارها ممارسة.

وتذكر:أي يستخدم الحدث العالمي كائن يدعى "الحدث".

بالمناسبة أي ميزة مفيدة في حالة:عندما المتصفحات الأخرى إرسال "زر" فقط على زر الماوس الأحداث (onclick, onmousedown ، onmouseup) ، أي يرسله مع onmousemove أيضا.حتى تتمكن من البدء في الاستماع onmousemove عندما كنت في حاجة لمعرفة الزر الدولة ، والتحقق من evt.زر في أقرب وقت كما كنت حصلت عليه — الآن أنت تعرف ماذا أزرار الماوس والضغط:

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

بالطبع يمكنك الحصول على أي شيء إذا كانت تعزف ميت لا يتحرك.

روابط ذات صلة:

• موسيفينت زر (دوم 2)
• MSDN زر

تحديث #1:أنا لا أعرف لماذا أنا حملت أكثر من وثيقة.الجسم الطراز من التعليمات البرمجية.سيكون من الأفضل أن نعلق معالجات الأحداث مباشرة إلى المستند.

Answer 2

هذا هو السؤال القديم و الأجوبة هنا يبدو أن معظمها الدعوة باستخدام mousedown و mouseup لتتبع ما إذا كان يتم الضغط على زر.ولكن كما أشار آخرون ، mouseup سوف النار إلا عندما تتم داخل المتصفح ، والتي يمكن أن تؤدي إلى فقدان المسار من الزر الدولة.

ومع ذلك ، موسيفينت (الآن) يدل على الأزرار التي يتم حاليا دفع:

• جميع المتصفحات الحديثة (باستثناء سفاري) استخدام MouseEvent.buttons
• لسفاري, استخدام MouseEvent.which (buttons سوف يكون غير معروف بالنسبة سفاري) ملاحظة: which يستخدم أرقام مختلفة من buttons عن الحق و المتوسطة من النقرات.

عندما المسجلة على document, mousemove سوف النار على الفور بمجرد أن المؤشر قد المتصفح, حتى إذا كان المستخدم النشرات خارج ثم فإن الدولة سوف يتم تحديثها بمجرد الماوس الى الداخل.

تطبيق بسيط قد تبدو مثل:

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

إذا كان أكثر تعقيدا السيناريوهات المطلوبة (مختلفة أزرار/أزرار متعددة/مفاتيح التحكم) ، تحقق موسيفينت مستندات.عندما/إذا سفاري مصاعد لعبة هذا يجب أن تحصل على أكثر سهولة.

Answer 3

وأعتقد أن أفضل طريقة لذلك هو الاحتفاظ بسجل خاص بك من الدولة زر الماوس، كما يلي:

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

وبعد ذلك، في وقت لاحق في التعليمات البرمجية:

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

Answer 4

والحل ليست جيدة. يمكن للمرء أن "mousedown" على الوثيقة، ثم "mouseup" خارج المتصفح، وعلى هذه الحالة المتصفح سيكون لا يزال يفكر في الماوس باستمرار.

والحل الوحيد الجيد يستخدم الكائن IE.event.

Answer 5

وأنا أعلم أن هذه هي وظيفة العمر، ولكن أعتقد أن تتبع زر الماوس باستخدام الماوس لأعلى / أسفل شعرت عالي الكعب قليلا، حتى وجدت البديل الذي قد يروق للبعض.

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

وو: محدد نشط يعالج النقر بالماوس أفضل بكثير من الماوس لأعلى / أسفل، كل ما تحتاجه هو وسيلة لقراءة تلك الدولة في حال onmousemove. لذلك كنت بحاجة للغش وتعتمد على حقيقة أن المؤشر الافتراضي هو "تلقائي" وأنا فقط تغييره إلى "الافتراضي"، وهو ما يختار السيارات بشكل افتراضي.

ويمكنك استخدام أي شيء في الكائن التي يتم إرجاعها من قبل getComputedStyle التي يمكنك استخدامها كما علم دون الإخلال مظهر صفحتك على سبيل المثال الحدود بين اللون.

وكان بودي لوضع بلدي المستعمل النمط المحدد في: قسم نشط، ولكن لم أستطع الحصول على هذا العمل. سيكون من الأفضل إذا كان من الممكن.

Answer 6

والمقتطف التالي من محاولتهم تنفيذ "doStuff" وظيفة 2 ثانية بعد وقوع الحدث mouseDown في document.body. إذا كان المستخدم يرفع على الزر، وسوف يحدث الحدث MouseUp وإلغاء إعدام تأخير.

وأنصح باستخدام بعض الطرق لعبر متصفح مرفق الحدث - وضع mousedown وmouseup خصائص وقد تم صراحة لتبسيط المثال.

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

Answer 7

قصيرة وحلوة

وأنا لست متأكدا من السبب أيا من الأجوبة السابقة عملت بالنسبة لي، ولكن خطرت لي هذا الحل خلال لحظة وجدتها. وهو يعمل فحسب، ولكنها أيضا الأكثر أناقة:

وإضافة إلى بطاقة الجسم:

onmouseup="down=0;" onmousedown="down=1;"

وبعد ذلك اختبار وتنفيذ myfunction() إذا down يساوي 1:

onmousemove="if (down==1) myfunction();"

Answer 8

ويمكنك الجمع بينPax وإجاباتي أيضا للحصول على المدة التي كانت الماوس لأسفل ل:

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

وبعد ذلك في وقت لاحق:

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

Answer 9

وتحتاج إلى معالجة MouseDown وMouseUp وتعيين بعض العلم أو شيء من هذا لتعقب ذلك "في وقت لاحق على الطريق" ...: (

Answer 10

وعن طريق مسج، الحل التالي يعالج حتى "سحب خارج الصفحة ثم حرر القضية".

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

وأنا لا أعرف كيف يتعامل مع أزرار الماوس متعددة. وإذا كانت هناك وسيلة لبدء النقر خارج النافذة، ثم جعل الماوس إلى النافذة، ثم وهذا ربما لا تعمل بشكل صحيح هناك أيضا.

Answer 11

وفيما يلي مسج سبيل المثال، عندما الماوس فوق $ ( '. عنصر)، اللون يتبدل تبعا التي يتم الضغط على زر الماوس.

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

Answer 12

كما قال @جاك, عندما mouseup يحدث خارج نافذة المتصفح ، نحن لسنا على علم به...

هذا الرمز (تقريبا) عملت بالنسبة لي:

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

لسوء الحظ, لن تحصل على mouseup الحدث في واحدة من تلك الحالات:

• المستخدم في نفس الوقت بالضغط على مفتاح لوحة المفاتيح و الماوس زر النشرات زر الماوس خارج نافذة المتصفح ثم النشرات الرئيسية.
• يضغط المستخدم اثنين أزرار الماوس في وقت واحد ، النشرات واحدة على زر الماوس ثم واحدة أخرى ، سواء خارج نافذة المتصفح.

Answer 13

إذا كنت تعمل داخل مجمع الصفحة الحالية الماوس معالجات الأحداث ، أنصح التعامل مع الحدث على التقاط (بدلا من فقاعة).للقيام بذلك, مجرد مجموعة 3 من المعلمة addEventListener إلى true.

بالإضافة إلى ذلك ، قد ترغب في التحقق event.which لضمان التعامل مع المستخدم الفعلي التفاعل و لا أحداث الماوس, على سبيل المثال elem.dispatchEvent(new Event('mousedown')).

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

إضافة إلى معالج الوثيقة (أو نافذة) بدلا من الوثيقة.الجسم المهم ب/ج يضمن mouseup الأحداث خارج النافذة لا تزال المسجلة.

Answer 14

حسنا، لا يمكنك معرفة ما اذا كان من أسفل بعد وقوع الحدث، ولكن يمكنك معرفة ما اذا كان الامر متروك ... وإذا كان الأمر .. فهذا يعني أن لم يعد هو أسفل: P لول

وهكذا يقوم المستخدم بالضغط على زر أسفل (الحدث عند_ضغط_الماوس) ... وبعد ذلك، يمكنك معرفة ما اذا كان متروك (onMouseUp). في حين انها لم يصل، يمكنك أن تفعل ما تريد.

Answer 15

        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

وهذا الإصدار عبر متصفح يعمل بشكل جيد بالنسبة لي.