Question

我创办了一个问题，我有一张桌子，在一个td元素里面，我有一个用于表示作品的span元素。

问题是td元素有一个onclick事件，而td内的span也有一个onclick事件。

所以问题是两个事件都被触发了，我只是想触发span元素的事件（如果有一个那么）。

我怎么能处理两个事件？

这是守则：

＆＃13;

var player = "p1";
var lastClickedId = "#";

$(".dot").on("click", dotClickHandler);

function dotClickHandler() {
  var rawPieceIdClicked = $(this).attr('id');
  if (lastClickedId === "#") {
    lastClickedId += rawPieceIdClicked;
    console.log(lastClickedId);
    $("#p1-p1").addClass("pieceSelected");
  }
}

function movableClickHandler() {
  console.log("aa");
  if (lastClickedId === "#")
    return;

  var cellId = "#" + $(this).attr('id');
  $(lastClickedId).detach().appendTo(cellId);
  $(lastClickedId).removeClass("pieceSelected");
  lastClickedId = "#";
}

$(".movable").on("click", movableClickHandler);

＆＃13;

* {
  margin: 0px;
  padding: 0px
}

table {
  margin: 0 auto;
  border-collapse: collapse;
  background: #B73A4A;
}

td {
  position: relative;
  width: 70px;
  height: 70px;
}

.dot {
  position: relative;
  width: 7vmin;
  height: 7vmin;
  background-color: #e4a6ae;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6vmin;
  display: inline-block;
  box-sizing: border-box;
  transition: all 0.2s linear;
  margin-top: 1vmin;
  margin-left: 1.3vmin;
  cursor: pointer;
  border: 1vmin solid #B93848;
  transition: all 0.2s linear;
  z-index: 2;
}

tr:nth-child(odd) td:nth-child(even),
tr:nth-child(even) td:nth-child(odd) {
  background: black;
}

.pieceSelected {
  box-shadow: 0 0 10px 5px #16A8C7;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td id="0-1"><span id="p1-p1" class="dot"></span></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="movable" id="1-1"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

＆＃13;

问题是，当我将棋子移动到那个地方后，我将棋子移动到带有可移动类（允许移动的类）的td，因为有可移动的类和点类会触发2个事件。

Answer 1

您可以将protected void Button1_Click(object sender, EventArgs e) { WebRequest MyWebRequest; WebResponse MyWebResponse; StreamReader sr; string strHTML; StreamWriter sw; MyWebRequest = HttpWebRequest.Create("https://qiita.com/naoki_mochizuki/items/3fda1ad6594c11d7b43c"); MyWebResponse = MyWebRequest.GetResponse(); sr = new StreamReader(MyWebResponse.GetResponseStream()); strHTML = sr.ReadToEnd(); string path = Environment.GetFolderPath(Environment.SpecialFolder.Desktop); sw = File.CreateText(@path +"\\"+TextBox1.Text+""); sw.WriteLine(strHTML); sw.Close(); }添加到div的点击事件

.off("click");

var player = "p1";
    var lastClickedId = "#";


    $( ".dot" ).on("click", dotClickHandler);

    function dotClickHandler()
    {
        var rawPieceIdClicked = $(this).attr('id');
        if (lastClickedId === "#") {
            lastClickedId += rawPieceIdClicked;
            console.log(lastClickedId);
            $("#p1-p1").addClass("pieceSelected");
        }
    }

    function movableClickHandler()
    {
        console.log("aa");
        if (lastClickedId === "#") return;

        var cellId = "#" + $(this).attr('id');

        $(lastClickedId).detach().appendTo(cellId);
        $(lastClickedId).removeClass("pieceSelected");
        lastClickedId = "#";
        $('.movable').off("click");

    }

    $( ".movable" ).on("click", movableClickHandler);

* {
            margin: 0px;
            padding: 0px
        }

        table {
            margin: 0 auto;
            border-collapse: collapse;
            background: #B73A4A;
        }

        td {
            position: relative;
            width: 70px; height: 70px;
        }


        .dot {
            position: relative;
            width: 7vmin;
            height: 7vmin;
            background-color: #e4a6ae;
            background-size: 65%;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 6vmin;
            display: inline-block;
            box-sizing: border-box;
            transition: all 0.2s linear;
            margin-top: 1vmin;
            margin-left: 1.3vmin;
            cursor: pointer;
            border: 1vmin solid #B93848;
            transition: all 0.2s linear;
            z-index: 2;
        }

        tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
            background: black;
        }

        .pieceSelected {
            box-shadow: 0 0 10px 5px #16A8C7;
        }

Checkers，HTML，JS，CSS 2在同一位置点击事件

1 个答案: