代码之家 › 专栏 › 技术社区 › Liam neesan

如何使用jQuery区分嵌套元素标记的click函数?

jquery

Liam neesan · 技术社区 · 6 年前

当用户单击按钮时,我想在输入文本框中添加文本。当用户在body标签内的按钮外单击时,我必须从文本框中删除文本。

$(document).ready(function() {
  $("button").click(function() {
    alert("only button is clicked");
    $("input:text").val("Test");
  });

  $("body").click(function() {
    alert("body clicked");
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="setName" value="" /><br/><br/><br/>
<button>Set the value of the input field</button>

3 回复 | 直到 6 年前

T.J. Crowder 6 年前

Rory's answer 像往常一样准时。另一种选择是只在上使用一个处理程序 body 使用 closest 要确定单击是否在传递到body的过程中通过了按钮,请参见注释:

$(document).ready(function() {
  $("body").click(function(e) {
    // Did this click pass through the button?
    if ($(e.target).closest("button").length) {
      // Yes
      alert("only button is clicked");
      $("input:text").val("Test");
    } else {
      // No
      alert("body clicked");
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="setName" value="" /><br/><br/><br/>
<button>Set the value of the input field</button>

Rory McCrossan Hsm Sharique Hasan 6 年前

body 单击handler,只需调用 stopPropagation() button

$(document).ready(function() {
  $("button").click(function(e) {
    e.stopPropagation();
    console.log("only button is clicked");
    $("input:text").val("Test");
  });

  $("body").click(function() {
    console.log("body clicked");
    $("input:text").val(''); // add this line to remove the text
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="setName" value="" /><br/><br/><br/>
<button>Set the value of the input field</button>

Ajay 6 年前

您可以通过event.target跟踪单击的任何元素的目标,然后执行必要的操作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="container">   
    <input type="text" id="setName" value="" />
    <button id="samplebtn">Set the value of the input field</button>
</body>


$("body").click(function(event) {
    if (event.target.id == "samplebtn") {
        //do button related work
    } else {
        //do other stuff
    }
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

2 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前