npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

input-listener

v1.1.6

Published

> * 鼠标触屏点击、拖拽、缩放、旋转手势监听,和任意普通按键与组合键监听 > * 兼容同时存在鼠标和触屏的设备,跟踪交互必须的每个触点(避免响应无关触点事件导致不必要的性能消耗,多触点过度时无抖动) > * [测试链接](https://feff01.github.io/input-listener/dist/test.html) > * [网址导航编辑器](http://www.holdhot.com/#/editor)

Downloads

29

Readme

input-listener

  • 鼠标触屏点击、拖拽、缩放、旋转手势监听,和任意普通按键与组合键监听
  • 兼容同时存在鼠标和触屏的设备,跟踪交互必须的每个触点(避免响应无关触点事件导致不必要的性能消耗,多触点过度时无抖动)
  • 测试链接
  • 网址导航编辑器

安装

    npm install input-listener
  • 免安装可直接保存 https://feff01.github.io/input-listener/dist/js/input_listener.js 文件,本地 script 引入后通过 window.InputListener 使用

应用


    import InputListener from 'input-listener';
    //const InputListener = require('input-listener');
    //const InputListener = window.InputListener;

    /**
     * @description 
     * @param {HTMLElement} 被监听的目标元素
     * @param {Object} events 可指定任意 key 不相同的监听
     * @param {?Object} options 同原生 addEventListener 方法的第三个参数
     */
    let inputListener = new InputListener(element,{

        /**
         * @description 鼠标或第一个触点按下时触发
         * @param {Event}
         */
        dragStart:console.log.bind(console,"dragStart"),

        /**
         * @description 鼠标或第一个触点(只存在一个触点时)按下并拖动时触发
         * @param {Event} 
         * @param {Array[0]} 距离上次响应移动的x轴距离
         * @param {Array[1]} 距离上次响应移动的y轴距离
         */
        dragMove:console.log.bind(console,"dragMove"),

        /**
         * @description 鼠标或最后一个触点弹起时触发
         * @param {Event} 
         */
        dragEnd:console.log.bind(console,"dragEnd"),

        /**
         * @description 当存在两个或以上触点时,第一或第二个触点移动时触发
         * @param {Event} 
         * @param {Array[0]} 距离上次响应移动的x轴距离
         * @param {Array[1]} 距离上次响应移动的y轴距离
         */
        dragMove2:console.log.bind(console,"dragMove2"),

        /**
         * @description 响应点击动作
         * @param {Event} 
         */
        click:console.log.bind(console,"click"),

        /**
         * @description 响应双指缩放手势
         * @param {Event} 
         * @param {number} 缩放距离(px)
         * @param {?Array[0]} 缩放中心点x(一次缩放手势过程中的第一次回调才存在该参数)
         * @param {?Array[1]} 缩放中心点y(一次缩放手势过程中的第一次回调才存在该参数)
         */
        pinch:console.log.bind(console,"pinch"),

        /**
         * @description 响应双指旋转手势
         * @param {Event} 
         * @param {number} 旋转弧度
         * @param {?Array[0]} 旋转中心点x(一次旋转手势过程中的第一次回调才存在该参数)
         * @param {?Array[1]} 旋转中心点y(一次旋转手势过程中的第一次回调才存在该参数)
         */
        rotate:console.log.bind(console,"rotate"),

        /**
         * @description 可用于组合键监听或者按键按下的监听(每个组合键或按键用 "," 分隔,可用 "|" 代表监听链中的"或"光系)
         * @param {Event} 
         * @param {string} 按键路径(类似 "alt+a" "arrowup+q+s" "w" 的字符串)
         */
        "alt|ArrowUp+a,arrowup+a|q+s,w_keyDown":console.log.bind(console,"keyDown"),

        /**
         * @description 监听指定的按键弹起(每个按键用 "," 分隔)
         * @param {Event} 
         */
        "alt,a,s,d_keyUp":console.log.bind(console,"keyUp"),

        /**
         * @description 监听指定的按键输入(每个按键用 "," 分隔)
         * @param {Event} 
         */
        "arrowup,q,w,e_keyPress":console.log.bind(console,"keyPress"),
    });

    /**
     * @description 由于屏幕交互事件额外支持一些冒泡功能(用于做更细致的交互定制),现在一种屏幕交互事件只支持同时存在一个监听,可通过实例化多个InputListener来支持复数个相同监听
     */
    inputListener.off("dragStart");
    inputListener.on("dragStart",console.log.bind(console,"dragStart"));

    /**
     * @description 键盘监听同一按键可存在多个不同监听回调方法
     */
    let ctrl_z_listener=console.log.bind(console,"ctrl_z_listener");
    inputListener.on("ctrl+z_keyDown",ctrl_z_listener);
    inputListener.off("ctrl+z_keyDown",ctrl_z_listener);