جافا سكريبت رسم أحداث لمس أحداث الماوس

Question

أنا أستخدم شريط التمرير YUI الذي يعمل مع أحداث نقل الماوس. أريد أن أجربها على أحداث TouchMove (iPhone و Android). كيف يمكنني إنتاج حدث تحرك الماوس عند حدوث حدث باللمس؟ آمل أن تكون فقط من خلال إضافة بعض النصي في الأعلى أن أحداث TouchMove ستحصل على أحداث نقل الماوس ولن تضطر إلى تغيير أي شيء مع شريط التمرير.

Answer 1

أنا متأكد من أن هذا ما تريد:

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup";   break;
        default:           return;
    }

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //                screenX, screenY, clientX, clientY, ctrlKey, 
    //                altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                  first.screenX, first.screenY, 
                                  first.clientX, first.clientY, false, 
                                  false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}

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

تحديث:

في نشر هذا، لاحظت أن الاتصال preventDefault على جميع الأحداث التي تعمل باللمس سوف تمنع الروابط من العمل بشكل صحيح. السبب الرئيسي للاتصال preventDefault على الإطلاق لإيقاف الهاتف من التمرير، ويمكنك القيام بذلك عن طريق الاتصال به فقط على touchmove أتصل مرة أخرى. الجانب السلبي الوحيد للقيام به بهذه الطريقة هو أن iPhone سوف يعرض أحيانا من المنبثقة التي تنبثق على أصل السحب. إذا اكتشفت طريقة لمنع ذلك، فسوف أقوم بتحديث هذا المنشور.

التحديث الثاني:

لقد وجدت خاصية CSS لإيقاف الدلالة: -webkit-touch-callout.

Answer 2

على طول سطور Mickey Shine الإجابة، لمس لكمة يوفر تعيين أحداث اللمس للنقر فوق الأحداث. انها بنيت لوضع هذا الدعم في jquery ui، ولكن الرمز مفيد.

Answer 3

للمستخدمين في المستقبل، الذين يعودون هنا قد يتم استخدام التعليمات البرمجية التالية:

var eventMap = {};

(function(){
var eventReplacement = {
    "mousedown": ["touchstart mousedown", "mousedown"],
    "mouseup": ["touchend mouseup", "mouseup"],
    "click": ["touchstart click", "click"],
    "mousemove": ["touchmove mousemove", "mousemove"]
};


for (i in eventReplacement) {
    if (typeof window["on" + eventReplacement[i][0]] == "object") {
        eventMap[i] = eventReplacement[i][0];
    } 
    else {
        eventMap[i] = eventReplacement[i][1];
    };
 };
})();

ثم في الأحداث تستخدم مثل التالية:

$(".yourDiv").on(eventMap.mouseup, function(event) {
      //your code
}

Answer 4

أخيرا وجدت طريقة للحصول على هذا العمل باستخدام حل ميكي ولكن بدلا من لوظيفة INIT. استخدم وظيفة INIT هنا.

function init() {
    document.getElementById('filter_div').addEventListener("touchstart", touchHandler, true);
    document.getElementById('filter_div').addEventListener("touchmove", touchHandler, true);
    document.getElementById('filter_div').addEventListener("touchend", touchHandler, true);
    document.getElementById('filter_div').addEventListener("touchcancel", touchHandler, true);
}

إذا رأيت "filter_div'هي منطقة الرسم البياني حيث لدينا مرشح نطاق المخطط الرسم البياني وفقط في هذا المجال هل نريد إعادة كتابة عناصر التحكم التي تعمل باللمس!

شكرا لك ميكي. كان حلا كبيرا.

Answer 5

لجعل رمز @ MECKEY يعمل على Edge and Internet Explorer، أضف الأسطر التالية في .css العنصر الذي تريد حدوث المحاكاة:

.areaWhereSimulationHappens {
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
}

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