账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    element-ui el-tree 点击节点事件如何获取事件源?
    48
    0

    因为firefox不支持window.event 通常的解决方法var evt = window.event || arguments.callee.caller.arguments[0]在严格模式下会报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"  node-key="id"></el-tree>

       handleNodeClick(node,data,value) {
            console.log(node)
            console.log(data)
            var myTarget = value.$el
            //console.log(value.$el)
            console.log(arguments.callee)
            let event = window.event || arguments.callee.caller.arguments[0];
            let target = event.srcElement||event.target;
        },

    请问各位有什么其他的方法能够在firefox浏览器中获取到当前事件的事件源

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 我是阿正啊 普通会员 1楼

      在Element UI的el-tree组件中，你可以通过node clicks事件来获取节点的点击事件源。以下是一个示例：

      html <el-tree :data="data" @node-click="handleNodeClick" :props="defaultProps" :default-checked-keys="defaultCheckedKeys"></el-tree>

      在这个例子中，我们首先定义了一个名为data的数组，其中包含要显示在el-tree中的树节点的数据。然后，我们定义了一个名为handleNodeClick的函数，该函数接受两个参数：node和event。node参数是被选中或未选中的节点对象，event参数是一个Vue实例，包含了node对象的点击事件信息。

      node-click事件处理器函数的代码如下：

      ```javascript handleNodeClick(node, event) { // 获取点击节点的子节点对象 const childNode = node.querySelector('.el-tree-node');

      // 获取事件的原始事件对象 const originalEvent = event;

      // 检查点击的节点是否是已选中节点 if (!originalEvent.isDefaultPrevented()) { // 获取被选中的节点对象 const checkedNode = originalEvent.target;

      // 获取选中的节点下的子节点对象
const checkedChildNode = checkedNode.querySelector('.el-tree-node');

// 如果选中的节点是未选中的子节点，更新选中状态
if (checkedChildNode && checkedChildNode !== childNode) {
  checkedChildNode.checked = false;
}

      }

      // 如果没有被选中的子节点，将事件发送到父节点 if (!childNode) { originalEvent.preventDefault(); originalEvent.stopPropagation(); this.$emit('node-click', node, originalEvent); } } ```

      在这个函数中，我们首先获取被选中的节点对象和事件的原始事件对象。然后，我们检查点击的节点是否是已选中节点。如果是，我们获取选中的节点下的子节点对象，并检查该子节点是否是未选中的子节点。如果是未选中的子节点，我们更新选中状态。最后，我们如果没有被选中的子节点，我们将事件发送到父节点。

      在data数组中，你可以使用defaultCheckedKeys属性来获取默认的选中值，这样在树节点被选中或未选中时，父节点都会被设置为选中状态。例如：

      javascript data() { return { data: [ { label: 'Node 1', children: [ { label: 'Sub Node 1', children: [ { label: 'Sub Sub Node 1', children: [] } ] }, { label: 'Sub Node 2', children: [ { label: 'Sub Sub Node 2', children: [] } ] } ] }, { label: 'Node 2', children: [ { label: 'Sub Node 1', children: [ { label: 'Sub Sub Node 1', children: [] } ] }, { label: 'Sub Node 2', children: [ { label: 'Sub Sub Node 2', children: [] } ] } ] } ], defaultCheckedKeys: ['node1'] }; }

      在这个例子中，树节点node1的子节点被选中，所以父节点node1的选中状态被设置为true。

    0 打赏 回复
    • ζη仅此而已、 普通会员 2楼

      在Element UI的el-tree组件中，你可以通过node clicks事件来获取节点的点击事件源。以下是一个示例：

      html <el-tree :data="data" @node-click="handleNodeClick" :props="defaultProps" :default-checked-keys="defaultCheckedKeys"></el-tree>

      在这个例子中，我们首先定义了一个名为data的数组，其中包含要显示在el-tree中的树节点的数据。然后，我们定义了一个名为handleNodeClick的函数，该函数接受两个参数：node和event。node参数是被选中或未选中的节点对象，event参数是一个Vue实例，包含了node对象的点击事件信息。

      node-click事件处理器函数的代码如下：

      ```javascript handleNodeClick(node, event) { // 获取点击节点的子节点对象 const childNode = node.querySelector('.el-tree-node');

      // 获取事件的原始事件对象 const originalEvent = event;

      // 检查点击的节点是否是已选中节点 if (!originalEvent.isDefaultPrevented()) { // 获取被选中的节点对象 const checkedNode = originalEvent.target;

      // 获取选中的节点下的子节点对象
const checkedChildNode = checkedNode.querySelector('.el-tree-node');

// 如果选中的节点是未选中的子节点，更新选中状态
if (checkedChildNode && checkedChildNode !== childNode) {
  checkedChildNode.checked = false;
}

      }

      // 如果没有被选中的子节点，将事件发送到父节点 if (!childNode) { originalEvent.preventDefault(); originalEvent.stopPropagation(); this.$emit('node-click', node, originalEvent); } } ```

      在这个函数中，我们首先获取被选中的节点对象和事件的原始事件对象。然后，我们检查点击的节点是否是已选中节点。如果是，我们获取选中的节点下的子节点对象，并检查该子节点是否是未选中的子节点。如果是未选中的子节点，我们更新选中状态。最后，我们如果没有被选中的子节点，我们将事件发送到父节点。

      在data数组中，你可以使用defaultCheckedKeys属性来获取默认的选中值，这样在树节点被选中或未选中时，父节点都会被设置为选中状态。例如：

      javascript data() { return { data: [ { label: 'Node 1', children: [ { label: 'Sub Node 1', children: [ { label: 'Sub Sub Node 1', children: [] } ] }, { label: 'Sub Node 2', children: [ { label: 'Sub Sub Node 2', children: [] } ] } ] }, { label: 'Node 2', children: [ { label: 'Sub Node 1', children: [ { label: 'Sub Sub Node 1', children: [] } ] }, { label: 'Sub Node 2', children: [ { label: 'Sub Sub Node 2', children: [] } ] } ] } ], defaultCheckedKeys: ['node1'] }; }

      在这个例子中，树节点node1的子节点被选中，所以父节点node1的选中状态被设置为true。

    0 打赏 回复
    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部