Checkers, HTML, JS, CSS 2 onclick events in same position

Question

I'm founding with an issue, I have a table and inside a td element, I have a span element for representing a piece.

The problem is that the td element has a onclick event, and the span inside the td has also a onclick event.

So the issue is that both events get triggered, and I just want to trigger the event for the span element (if one piece is there).

How could I handle two events?

Here Is the Code:

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);

* {
  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;
}

<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>

The problem is when I move the piece to a td with the movable class (a class to allow movements) after I move the piece to that place the problems begin, because there is the movable class and the dot class which will fire the 2 events.

Sorry for that, I thought that the description was enough, added. — redigaffi, Apr 09 '18 at 09:43
@freedomn-m Hey, thanks, that did it. But could you please explain why it worked? Seems that the return false stop's the next event execution. — redigaffi, Apr 09 '18 at 09:54
Possible duplicate of [event.preventDefault() vs. return false](https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) — freedomn-m, Apr 09 '18 at 09:56
It stops event propagation and the default event handler. This (very old) answer explains it in more detail: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — freedomn-m, Apr 09 '18 at 09:57

score 0 · Answer 1 · answered Apr 09 '18 at 09:53

You can add .off("click"); to off click event of div

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;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <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>
</body>

Checkers, HTML, JS, CSS 2 onclick events in same position

1 Answers1