Pressure.js – 用于处理Force Touch，3D Touch的JS库 - 魏长露的博客

干就完了 –

pressurejs - https://pressurejs.com/
pressurejs - https://github.com/stuyam/pressure

Pressure.js 是一个用于处理 web 上的 Force Touch ，3D Touch 和指针压力的 JavaScript 库。

安装

可以从 GitHub 下载 pressure.min.js 或 pressure.js 文件，也可以使用 npm 或 bower 进行安装。

npm

$ npm install pressure --save

bower

$ bower install pressure --save

配置

在全局空间中使用:

Pressure.set('#id-name', {
  change: function(force){
    this.innerHTML = force;
  }
});

或者与 browserify 或 CommonJS 一起使用：

var Pressure = require('pressure');

Pressure.set('#id-name', {
  change: function(force){
    this.innerHTML = force;
  }
});

用法

注意:每个回调方法中的"this"关键字将是应用于它的元素本身

Pressure.set('#element', {
  start: function(event){
    // 开始时
  },
  end: function(){
    // 结束时
  },
  startDeepPress: function(event){
    // 压感触控/深压时, 也就是一旦压感大于0.5时
  },
  endDeepPress: function(){
    // 当压感触控/深压结束时
  },
  change: function(force, event){
    // 每次压感发生变化时都会被调用
    // 在移动设备和桌面端，压感的值始终为0到1
  },
  unsupported: function(){
    // 注意：只有在polyfill选项被禁用的情况下才会调用这个选项！
    // 一旦触摸元素并且设备或浏览器不支持压感触控或3D触控时调用
  }
});

jQuery 用法

注意:每个回调方法中的"this"关键字将是应用于它的元素本身

$('#element').pressure({
    start: function (event) {
        // 开始时
    },
    end: function () {
        // 结束时
    },
    startDeepPress: function (event) {
        // 压感触控/深压时, 也就是一旦压感大于0.5时
    },
    endDeepPress: function () {
        // 当压感触控/深压结束时
    },
    change: function (force, event) {
        // 每次压感发生变化时都会被调用
        // 在移动设备和桌面端，压感的值始终为0到1
    },
    unsupported: function () {
        // 注意：只有在polyfill选项被禁用的情况下才会调用这个选项！
        // 一旦触摸元素并且设备或浏览器不支持压感触控或3D触控时调用
    }
});

可选项

Polyfill Support

Pressure.set('#example', {
  change: function(force, event){
    this.innerHTML = force;
  },
  unsupported: function(){
    alert("Oh no, this device does not support pressure.");
  }
}, {polyfill: false});

Polyfill Speed Up

Pressure.set('#example', {
  change: function(force, event){
    this.innerHTML = force;
  }
}, {polyfillSpeedUp: 5000});
// takes 5 seconds to go from a force value of 0 to 1
// only on devices that do not support pressure

Polyfill Speed Down

Pressure.set('#example', {
  change: function(force, event){
    this.innerHTML = force;
  }
}, {polyfillSpeedDown: 2000});
// takes 2 seconds to go from a force value of 1 to 0
// only on devices that do not support pressure

只能在触控板(鼠标)上运行 Only run on Force Touch trackpads (mouse)

Set the option only to the type you want it to run on ‘mouse’, ‘touch’, or ‘pointer’. The names are the types of events that pressure will respond to.
【译】只设置选项的类型，你希望它运行在’鼠标’，‘触摸’，或’指针’。这些名称是压力响应的事件类型。

Pressure.set('#example',{
  change: function(force, event){
    console.log(force);
  },
}, {only: 'mouse'});

只在3D Touch上运行(Touch) Only run on 3D Touch (touch)

Pressure.set('#example',{
  change: function(force, event){
    console.log(force);
  },
}, {only: 'touch'});

只在指针支持的设备上运行(指针) Only run on Pointer Supported Devices (pointer)

Pressure.set('#example',{
  change: function(force, event){
    console.log(force);
  },
}, {only: 'pointer'});

更改preventSelect选项 Change the preventSelect option

The preventDefault option in “true” by default and it prevents the default actions that happen on 3D “peel and pop” actions and the Force “define word” actions as well as other defaults. To allow the defaults to run set preventDefault to “false”
【译】该preventDefault选项在“true”默认情况下，它防止发生在3D“剥离和弹出”行动和Force“define word”行动以及其他默认情况下的默认行动。允许默认值运行设置preventDefault为false

Pressure.set('#example',{
  change: function(force, event){
    console.log(force);
  },
}, {preventSelect: false});

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

Pressure.js – 用于处理Force Touch，3D Touch的JS库

安装

npm