Запретить запуск родительского события клика. Щелчок по дочернему элементу

У меня есть следующее меню, которое сводится к трем уровням: Main > sub > subsub

<nav>
      <div class="mainMenu">Main Menu Item # 1.
                    <ul>
                        <li> Sub Menu Item # 1</li>
                        <li class="subMenu"> Sub Menu Item # 2
                            <ul>
                                <a href="New">
                                    <li>New</li>
                                </a>
                                <a href="">
                                    <li>Old</li>
                                </a>
                                <a href="">
                                    <li>View </li>
                                </a>
                            </ul>
                             <div class="n_r2_c2"></div>
                        </li>
                        <li> Sub Menu Item # 3</li>
                        <li> Sub Menu Item # 4</li>
                    </ul>
  </div>

И это как мой JQ:

$('.mainMenu').click(function () {
    $(this).children('ul').slideToggle(250);
});

$('.subMenu').click(function () {
        $(this).children('ul').slideToggle(250);
});

Проблема заключается в переключении подменю для подменю main, но когда я нажимаю элемент в подменю, вместо того, чтобы переключать его подменю, он закрывается, потому что когда я нажимаю на подменю в главном меню click событие также уволено, скорее всего, потому, что подменю находится внутри него, и он нажимает на него как щелчок на главном div?

В любом случае, как я могу решить эти проблемы, пожалуйста, помогите.

Ответ 1