javascript - 如何在上下文菜单中触发全局功能

Question

我有一个table它由文档列表(来自 JSON 文件)填充，单击复选框会将该特定文档添加到收藏夹列表中。

我创建了一个包含三个选项的自定义上下文菜单。 我试图做到这一点，以便有人点击其中一个选项(“添加到收藏夹”)，它的作用与我上面描述的相同。简单地说，我不知道如何触发该函数，因为它超出了原始收藏夹函数的范围。我尝试将收藏夹功能分组到其自己的函数中并引用它，但我的语法有些问题(或者我偏离了方向，没有朝着正确的方向前进？)。有什么想法吗？

JS 添加收藏夹功能:

function faveFunc(evt) {
  const $table = $("#km-table-id")

  let table = $table.DataTable();
  let favesArr = [];

      let data = table.row(this.parentNode).data(),
      checked = $(this).is(":checked"),
      dataIndex = favesArr.indexOf(data);
      if (checked) {
        if (dataIndex === -1) {
          favesArr.push(data); // add item
        }
      } else {
        if (dataIndex > -1) {
          favesArr.splice(dataIndex, 1); // remove item
        }
      }  


      // - Appending selected faves to div - //

      ($(".populate-faves").empty()); // removes all previous entries
      for (var i = 0; i < favesArr.length; i++) {
        $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/><br/>').addClass("faved-doc");  
      }


    }; // ------------ faveFunc

    $("#km-table-id.checkbox-class, [data-action='add']").on("click", faveFunc)


  console.log(faveFunc)

上下文菜单:

  ///// Show menu /////
  $(document).on("contextmenu", function(evt) {
      evt.preventDefault();
    $(".custom-menu")
    .show()
    .css({ top: evt.pageY, left: evt.pageX });

    ///// Close menu /////
    $(document).on("mousedown", function(evt) {
      if (!$(evt.target).parents(".custom-menu").length > 0) {
        $(".custom-menu").hide(100);
      }
    })
  });

HTML 片段:

<ul class="custom-menu">
  <li data-action="open">Open Document</li>
  <li data-action="add" oncontextmenu="()">Set As Favorite</li>
  <li data-action="email"><a href="mailto:?subject=subject">Email Document</a></li>
</ul>

Answer 1

faveFunc 只设置一个监听器

让我们看看faveFunc:

function faveFunc() {
    let addFave = $table.on("click", ".checkbox-class", function(e) {
        // ...
    })
}

当您调用faveFunc时，它所做的只是设置一个“点击”监听器。它实际上并不执行点击监听器。

文档不是你想象的那样

关于$(document).on("contextmenu")和$(document).on("click"):document是网页上的全局变量，引用网页本身。它不涉及网页的任何内容。当您单击或右键单击页面上的任意位置时，这些事件将会触发。

设置事件监听器的方式保持一致。

您目前正在通过三种不同的方式执行此操作:

• $(选择器).on("点击")
• $(选择器).click()
• $(选择器).on("点击", 过滤器)

选择一个。就我个人而言，我更喜欢 $(selector).on("click")。

将事件处理程序变成命名函数

而不是这个:

function faveFunc() {
    let addFave = $table.on("click", ".checkbox-class", function(e) {
        // ...
    })
}

...我会这样做:

function faveFunc(e){
    // ...
}
$("#km-table-id.checkbox-class").on("click", faveFunc)

这样，您就可以重复使用 faveFunc 事件处理程序:

function faveFunc(e){
    // ...
}
$("#km-table-id.checkbox-class").on("click", faveFunc)
$("[data-action='add']").on("click", faveFunc)

您还可以将它们组合成一个函数，因为 jQuery 支持 CSS ,:

$("#km-table-id.checkbox-class, [data-action='add']").on("click", faveFunc)