HTML页面自定义鼠标监听

如何可以实现html页面的自定义区域鼠标监听事件？在指定区域点击，触发事件反应。

可以使用jQuery轻松监听各种事件，比如说点击、双击、鼠标进入等等，但是那是全局了，如果想要在某个组件才发生操作，比如说在某个div内右键才会弹窗自定义的窗口

<script type="text/javascript">
   function showRightMenu(data) {
       $(document).contextmenu(function(e) {
           e.stopPropagation();  //阻止冒泡
           var jsgridGridBody = $(".jsgrid-grid-body")[0]  // 获取被点击的区域（祖父标签）
           var target = e.target  // 获取被点击的对象
           if ($.contains(jsgridGridBody, target)) {
               console.log("包含了")
               // 自己的代码，比如说打开自定义右键菜单
               return false;  // 阻止默认的右键菜单
           }
       });
       //隐藏自定义右键菜单
       $(document).click(function() {
           $(".contextmenu").hide();
       });
   }
</script>

let info = document.getElementById('devInfo')
          info.addEventListener('click', function () {
           //点击之后干啥
          })

      })