为Twine（SugarCube）UI元素添加悬停与点击音效的实现

我使用Twine 2.5.1搭配SugarCube故事格式，需要为所有可点击UI元素添加悬停和点击音效，重点覆盖存档弹窗内的按钮：关闭按钮、5个保存按钮、5个删除按钮、导出/导入/清空按钮，以及创建存档后生成的加载按钮。

临时解决方案的局限 #

此前仅针对<a>标签实现了音效，代码如下：

/* Play Sound on "a" Hover */
$(document).on("mouseenter", "a", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_hover.ogg",
    autoplay : "autoplay"
});
});

/* Play Sound on "a" Click */
$(document).on("mousedown", "a", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_click.ogg",
    autoplay : "autoplay"
});
});

但该代码仅对多数<a>元素生效，必须给按钮手动添加<a>标签包裹才能兼容，属于临时解决方案。

最终解决方法 #

最初尝试通过元素ID直接绑定事件未成功，后来新增了针对<button>标签的事件监听代码，同时保留原有的<a>标签代码，最终实现了所有可点击元素的音效覆盖，无需再为按钮添加<a>包裹。

新增的<button>标签音效代码：

/* Play Sound on "button" Hover */
$(document).on("mouseenter", "button", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_hover.ogg",
    autoplay : "autoplay"
});
});

/* Play Sound on "button" Click */
$(document).on("mousedown", "button", "Dialog.addClickHandler()", function () {
$("<audio></audio>").attr({
    src      : "Assets/Audio/Menu/button_click.ogg",
    autoplay : "autoplay"
});
});

内容的提问来源于stack exchange，提问作者Penelope