如何为JavaFX按钮绑定鼠标点击与回车键按下两种事件？

没问题！我来给你整理几种不同场景下的实现方案，不管你用原生JavaScript、jQuery还是Vue框架，都能轻松实现「点击按钮」和「按回车键」触发同一事件的需求～

原生JavaScript实现 #

这是最基础的写法，适合没有引入任何框架的项目：

// 获取页面中的按钮元素
const targetButton = document.getElementById('mySubmitBtn');

// 定义核心的事件处理函数（把你要执行的逻辑写在这里）
function triggerAction() {
  console.log('事件被触发啦！');
  // 示例：提交表单、发送请求、更新页面内容等
}

// 给按钮绑定点击事件
targetButton.addEventListener('click', triggerAction);

// 监听全局回车键事件
document.addEventListener('keydown', function(e) {
  // 用e.key === 'Enter'比keyCode更直观，兼容性也更好
  if (e.key === 'Enter') {
    // 直接调用处理函数，或者触发按钮的click方法都可以
    triggerAction();
    // 也可以写成：targetButton.click();
  }
});

jQuery实现 #

如果你的项目用了jQuery，代码会更简洁：

// 定义事件处理函数
function triggerAction() {
  console.log('事件被触发啦！');
  // 你的业务逻辑
}

// 绑定按钮点击事件
$('#mySubmitBtn').click(triggerAction);

// 监听回车键
$(document).keydown(function(e) {
  if (e.key === 'Enter') {
    triggerAction();
    // 或者直接触发按钮点击：$('#mySubmitBtn').click();
  }
});

Vue 2/Vue 3实现 #

在Vue项目里，有两种常见的实现方式：

方式1：给输入框绑定回车键事件 #

适合单个输入框+按钮的场景，直接给输入框加@keyup.enter指令：

<template>
  <div class="action-container">
    <input 
      type="text" 
      placeholder="输入内容后按回车" 
      @keyup.enter="triggerAction"
    >
    <button @click="triggerAction">提交</button>
  </div>
</template>

<script>
// Vue 2写法
export default {
  methods: {
    triggerAction() {
      console.log('按钮/回车键触发了！');
      // 执行你的业务逻辑
    }
  }
}

// Vue 3组合式API写法
// import { defineComponent } from 'vue';
// export default defineComponent({
//   setup() {
//     const triggerAction = () => {
//       console.log('按钮/回车键触发了！');
//     };
//     return { triggerAction };
//   }
// });
</script>

方式2：全局监听回车键 #

如果需要在页面任何位置按回车都触发事件，可以在组件的生命周期钩子中监听：

<script>
export default {
  mounted() {
    // 挂载后监听全局键盘事件
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        this.triggerAction();
      }
    });
  },
  methods: {
    triggerAction() {
      console.log('全局回车键触发事件！');
    }
  }
}
</script>

表单场景的简化实现 #

如果你的按钮是在<form>标签里，完全可以利用表单的默认行为，不需要额外监听回车键：

<form id="myForm">
  <input type="text" name="userInput" placeholder="输入内容">
  <button type="submit">提交</button>
</form>

<script>
// 给表单绑定submit事件
document.getElementById('myForm').addEventListener('submit', function(e) {
  // 阻止表单默认的页面跳转行为
  e.preventDefault();
  console.log('表单提交了！点击按钮或按回车都会触发');
  // 在这里写你的提交逻辑
});
</script>

这个方法最省心，因为浏览器原生就支持在表单输入框按回车触发提交，同时点击submit按钮也会触发同一事件。

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