Scrollow for mac(觸控板手勢工具) 1.6.4

crollow 讓您無需觸摸功能鍵或使用 Touch Bar，即可控制各種系統參數（系統音量、屏幕亮度、鍵盤照明）并發出控制事件（切換曲目、播放和暫停）。只需在屏幕頂部或應用程序的菜單欄圖標上使用滾動手勢即可。

添加精細的音量、亮度和照明調整（類似于按下媒體鍵時按住Shift+選項）添加靜音操作（單向）細微改進

系統說明

macOS 10.15 或更高版本
Apple Silicon 或 Intel Core 處理器

詳情：https://www.macz.com/mac/8353.html?id=ODE3NDU1Jl8mMjcuMTg2LjEyNC45Ng%3D%3D

么創建自定義事件

創建自定義事件聽起來很困難，但是只需要下面簡單的一行代碼即可。

const myEvent = new Event("myCustomEvent")

你可以通過事件構造函數創建一個新的 Event 對象。在最基本的形式中，你只需要將一個字符串傳遞給構造函數，這個字符串就是你定義的事件名稱。為了監聽這個事件，你可以將該事件監聽器添加到你要監聽的元素上，如下：

document.addEventListener("myCustomEvent", e => {

  console.log(e)

})

最后一步，你需要做的事，觸發創建并正在監聽的事件。

document.dispatchEvent(myEvent)

這就需呀 dispatchEvent 函數了。每個元素都有這個方法，你要做的就是將你創建的對象傳遞給它。

如果我們將上面講的組合在一起，我們就得到了一個基本的事件，這個事件在我們的 document 元素觸發，相關的事件內容會被打印出來。

{

  isTrusted: false

  bubbles: false

  cancelBubble: false

  cancelable: false

  composed: false

  currentTarget: null

  defaultPrevented: false

  eventPhase: 0

  path: [document, window]

  returnValue: true

  srcElement: document

  target: document

  timeStamp: 54.69999998807907

  type: "myCustomEvent"

}

圖中是這個事件對象的最基本形式。它包含大量信息，最重要的部分我這里突出顯示了。

isTrusted 屬性僅指該事件是由用戶交互觸發，還是由自定義 JavaScript 代碼觸發的。例如，當用戶單擊按鈕時，事件將 isTrusted 設置為 true，而我們自定義的事件會將其設置為 false，因為該事件是由 JavaScript 觸發的。

target 指調用 dispatchEvent 函數的元素。

type 指事件的名稱。

事件定制

你可能注意到了，上面的詳情中有屬性 bubbles, cancelable 和 composed 屬性。這些實際上，在我們創建自定義事件時可以配置的選項。

const myEvent = new Event("myCustomEvent", {

  bubbles: true,

  cancelable: true,

  composed: true

})

冒泡 bubbles

當事件觸發后，bubbles 屬性決定這個事件是否可以通過 html 進行冒泡。這個值默認為 false，這意味著不可以進行冒泡行為，如果你想事件調用父 HTML 元素，你可以將其設置為 true。

const bubbleEvent = new Event("bubbleEvent", { bubbles: true })

const defaultEvent = new Event("defaultEvent", { bubbles: false })




document.addEventListener("bubbleEvent", () => {

  // This will get called since the event will bubble up to the document from the button

  console.log("Bubble")

})




document.addEventListener("defaultEvent", () => {

  // This never gets called since the event cannot bubble up to the document from the button

  console.log("Default")

})




const button = document.querySelector("button")

button.dispatchEvent(bubbleEvent)

button.dispatchEvent(defaultEvent)

可取消 cancelable

cancelable 屬性決定事件是否可以通過調用 e.preventDefault() 取消。默認是 false 不可以。如果該屬性是 true 值，你可以調用 e.preventDefault() 方法。e.preventDefault() 會將事件 defaultPrevented 屬性設置為 true。

const cancelableEvent = new Event("cancelableEvent", { cancelable: true })

const defaultEvent = new Event("defaultEvent", { cancelable: false })




document.addEventListener("cancelableEvent", e => {

  e.preventDefault()

  console.log(e.defaultPrevented) // True

})




document.addEventListener("defaultEvent", e => {

  e.preventDefault()

  console.log(e.defaultPrevented) // False

})




document.dispatchEvent(cancelableEvent)

document.dispatchEvent(defaultEvent)

組合 composed

composed 屬性決定事件是否可以通過影子 dom 向上傳播。默認值是 false。該屬性僅在你使用自定 HTML 元素和影子 DOM 的時候才適用，它所做的是允許事件在影子 DOM 外面傳播。

如果你想在影子 DOM 中觸發的事件可以在影子 DOM 外被捕捉到，就將其設置為 true。

沒聽懂沒關系，后面學著學著就懂了

給事件傳遞自定義數據

當你使用自定事件時，你希望自定義的數據傳遞給你的事件。使用 new Event 構造函數是不可能的，這也就是為什么會有第二種創建事件的方法。

const myEvent = new CustomEvent("myEvent", { detail: { hello: "World" } })

CustomEvent 構造函數取代 Event 構造函數。這與 new Event 的工作方式相同，但你可以將 detail 屬性以及 bubbles，cancelable 和 composed屬性一起傳遞給第二個參數。detail 屬性中你設置的內容都會傳遞給事件監聽器。

const myEvent = new CustomEvent("myEvent", { detail: { hello: "World" } })




document.addEventListener("myEvent", e => {

  console.log(e.detail) // { hello: "World" }

})




document.dispatchEvent(myEvent)

命名約定

在我們講自定義雙擊事件的例子前，我想先講講命名約定。你可以為自定義事件命名任何你想要的名字，但是還是遵循命名約定，以更方便使用自己的代碼。最普遍的命名約定事件，是為事件添加 custom: 前綴。

custom: 以區分自定義事件和本身的事件，而且，如果 JavaScript 添加與你的事件同名的新事件，它還可以確保你的代碼不會中斷。

舉個例子，如果 JavaScript 添加了一個名為 doubleclick 事件，然后你已經在時候 doubleclick 自定義事件了，那么你會遇到問題，因為你自定義代碼將觸發該事件，并且瀏覽器也會嘗試觸發它自己的副本。

// Always use some form of naming convention

const myEvent = new Event("custom:doubleClick")

雙擊事件

在這個例子中，我們將創建一個雙擊的事件，只要你在短時間內單擊一個元素，就會觸發該事件。該事件還會將按鈕單擊之間的總時間作為自定義數據傳遞。

首先，我們需要創建一個正常的單擊事件監聽器來確保是否有雙擊。

const button = document.querySelector("button")




const MAX_DOUBLE_CLICK_TIME = 500

let lastClick = 0

button.addEventListener("click", e => {

  const timeBetweenClicks = e.timeStamp - lastClick

  if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {

    lastClick = e.timeStamp

    return

  }




  // TODO: Double click happened. Trigger custom event.

  lastClick = 0

})

上面的代碼使用 timeStamp 屬性來確保按鈕上單擊事件之間的時間。如果點擊之間的時間超過 500 毫秒。

則會立刻返回并更新 lastClick 的值。一旦我們在 500 毫秒內點擊了兩次，我們將通過 if 檢查并觸發我們的雙擊事件。為此，我們需要創建我們的事件并調用它。

const button = document.querySelector("button")




const MAX_DOUBLE_CLICK_TIME = 500

let lastClick = 0

button.addEventListener("click", e => {

  const timeBetweenClicks = e.timeStamp - lastClick

  if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {

    lastClick = e.timeStamp

    return

  }




  // TODO: Double click happened. Trigger custom event.

  lastClick = 0

})

對于我們自定義的事件，我們將所有選項都設置為 true，因為默認情況下，單擊事件將所有這些屬性設置為 true，而且我們希望雙擊的行為類似于正常的單擊。

我們也將 timeBetweenClicks 傳遞到 detail 選項中。

最后，我們在事件的目標上調度事件，這里是按鈕元素。我們剩下要做的最后一件事就是監聽事件。

onst button = document.querySelector("button")




const MAX_DOUBLE_CLICK_TIME = 500

let lastClick = 0

button.addEventListener("click", e => {

  const timeBetweenClicks = e.timeStamp - lastClick

  if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {

    lastClick = e.timeStamp

    return

  }




  const doubleClickEvent = new CustomEvent("custom:doubleClick", {

    bubbles: true,

    cancelable: true,

    composed: true,

    detail: { timeBetweenClicks },

  })

  e.target.dispatchEvent(doubleClickEvent)

  lastClick = 0

})

我們剛剛向按鈕田間了一個簡單的事件監聽器，它將打印出 Double Click 之間的時間。

總結

自定義事件是 JavaScript 中處理手勢和雙擊事件的好方案，最重要的是，他們非常容易實現和使用。

家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。

今天遇到一個非常有意思的庫，即 Handsfree.js，特意分享給大家，看看是否可以結合自己的日常研發、業務支持等做一點小小的創新。話不多說，直接開始。

1.什么是 Handsfree

Build handsfree User Experiences and add face, hand, and pose tracking to your projects in a snap ?

Handsfree 是一個通過計算機視覺集成手勢，面部表情和各種姿勢識別的前端庫。其核心 AI 技術用到了 tensorflow，可在瀏覽器上觸發交互事件，比如：滾動網頁，檢測人臉并展示相關表情，控制桌面游戲等等，開發者還可以通過 Handsfree 與 websocket 的結合控制任意與電腦連接的設備。

官方提供的以下模型可以實時組合和重新配置：

MediaPipe Hands (2D)：每只手 21 個 2D 手部標志；同時追蹤最多 4 只手；支持捏合狀態、手指指針和手勢
TensorFlow Handpose：支持 21 個 3D 手部標記；一次只能追蹤 1 只手；支持額外的助手和插件
MediaPipe FaceMesh：支持 468 個 2D 人臉特征點；一次最多追蹤 4 張面孔；支持更多助手和插件
MediaPipe Pose：支持具有 33 個 2D 姿勢地標的全身模式；具有 25 個 2D 上身姿勢標志的上半身模式
TensorFlow Handpose：支持 6DOF 頭部姿勢；11 種面部變形和 16 種輔助狀態；附帶基于 “Face Pointer” 的插件

2.如何使用 Handsfree

開發者可以選擇從 CDN 加載資源然后使用，比如下面的例子：

<head>
  <!-- 加載 Handsfree.js 的官方包，包含 css 和 js -->
  <link rel="stylesheet" href="https://unpkg.com/handsfree@8.5.1/build/lib/assets/handsfree.css" />
  <script src="https://unpkg.com/handsfree@8.5.1/build/lib/handsfree.js"></script>
</head>

<body>
  <!-- 實例化Handsfree同時啟用  -->
  <script>
    const handsfree = new Handsfree({hands: true})
    handsfree.enablePlugins('browser')
    handsfree.start()
  </script>
</body>

當然，也可以選擇從 NPM 下載然后使用：

// 啟用 Mediapipe 的 “手” 模型
const handsfree = new Handsfree({hands: true})
// 啟動標簽為 "browser" 的插件
handsfree.enablePlugins('browser')
// 開始追蹤
handsfree.start()

但是，值得一提的是某些模型體積可能超過 10Mb+，加載可能需要先對較長的時間。因此，如果要自行托管模型并離線使用，可以將模型從 npm 包下載到項目的公共文件夾中，比如 PUBLIC：

// 在 WINDOWS 平臺上
xcopy /e node_modules\handsfree\build\lib PUBLIC
// 在其他平臺上
cp -r node_modules/handsfree/build/lib/* PUBLIC

然后按照如下方式引用：

import Handsfree from 'handsfree'
const handsfree = new Handsfree({
  hands: true,
  // Set this to your where you moved the models into
  assetsPath: '/PUBLIC/assets',
})
handsfree.enablePlugins('browser')
handsfree.start()

Handsfree.js 還允許開發者通過 handsfree.use(pluginName,callback) 創建各種插件，比如：

// A plugin that console logs your data on every frame
handsfree.use('consoleLogger', (data) => {
  console.log(data.weboji.rotation, data.pose.data.faceLandmarks)
})

以上代碼將創建一個新插件，然后可以使用 handsfree.plugin.consoleLogger 訪問該插件，并將在每一幀上運行?；卣{存儲在 handsfree.plugin.consoleLogger.onFrame 中，可以使用以下命令切換插件可用狀態：

handsfree.plugin.consoleLogger.enable()
handsfree.plugin.consoleLogger.disable()

更多關于 Handsfree.js 的用法和原理可以參考文末資料，本文不再過多展開。

參考資料

https://handsfreejs.netlify.app/#models

https://ko-fi.com/handsfreejs

在線咨詢

上一篇：盤點在線代碼編輯測試網站
下一篇：Sql自定義函數去除html標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商