Question

import React from 'react';
import { AppProvider, useAppValue } from './AppContext';
import FormLogin from './FormLogin';
import FormRegister from './FormRegister';

const App = () => {
  const initialState = {
    page: <FormLogin/>
  }

  const reducer = (state, action) => {
    switch (action.type) {
      case 'loadLogin':
        return {
          ...state,
          page: <FormLogin/>
        };
      case 'loadRegister':
        return {
          ...state,
          page: <FormRegister/>
        };
      default:
        return state;
    }
  };

  let { page } = useAppValue();
  let currentPage = page ? page : <FormLogin/>

  return (
    <AppProvider initialState={initialState} reducer={reducer}>
      <div className="App">
        {currentPage}
      </div>
    </AppProvider>    
  );
}

export default App;

import React, { createContext, useContext, useReducer } from 'react';

export const AppContext = createContext();
export const AppProvider = ({reducer, initialState, children}) => (
  <AppContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </AppContext.Provider>
);

export const useAppValue = () => useContext(AppContext);

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
    kotlin("plugin.jpa") version "1.2.71"
    id("org.springframework.boot") version "2.1.5.RELEASE"
    id("io.spring.dependency-management") version "0.6.0.RELEASE"
    kotlin("jvm") version "1.2.71"
    kotlin("plugin.spring") version "1.2.71"

//    kotlin("kapt") version "1.3.31"
}


group = "com.example"
version = "0.0.1-SNAPSHOT"
java.sourceCompatibility = JavaVersion.VERSION_1_8

repositories {
    mavenCentral()
    maven { url = uri("https://plugins.gradle.org/m2/") }
}

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-data-jpa")
    implementation("org.springframework.boot:spring-boot-starter-jdbc")
    implementation("org.springframework.boot:spring-boot-starter-web")
    implementation("com.fasterxml.jackson.module:jackson-module-kotlin")
    implementation("org.jetbrains.kotlin:kotlin-reflect")
    implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
    runtimeOnly("mysql:mysql-connector-java")
    testImplementation("org.springframework.boot:spring-boot-starter-test")
    compile("com.querydsl", "querydsl-jpa", "3.6.3")
    kapt("com.mysema.querydslquerydsl-apt:3.6.3:jpa") 
}


group = "com.acme"
tasks.withType<KotlinCompile> {
    kotlinOptions {
        freeCompilerArgs = listOf("-Xjsr305=strict")
        jvmTarget = "1.8"
    }
}

我具有按钮单击和主体单击功能。但是，如果在单击主体时在控制台中打印任何值，它就可以正常工作。但是，相同的功能也适用于按钮单击。

我的需要是

1）如果单击按钮，则不应触发主体onclick。只有按钮onclick应该起作用。

2）单击按钮，过滤器下拉列表打开。当我再次单击相同的按钮时，它将关闭。（切换）

3）但是，当我在任何地方单击外部时，我想隐藏该下拉菜单。但这是行不通的。

如何使用angularjs做到这一点？

Answer 1

在子按钮元素回调函数中使用event.stopPropagation（）。

angular.element('#btn-append-to-body').on('click', function () {
    event.stopPropagation();
});

Answer 2

在ng上单击$ event并单击子方法，即按钮，然后在子方法中对事件进行stopPropagation（）。 StopPropagation停止事件冒泡。

HTML

    <div ng-click='parentClick()'>
        <button ng-click="childClick($event)">Click Me</button>
    </div>

JS


    var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.parentClick = function() {
            alert('Parent clicked');
        };
        $scope.childClick = function(event) {
            event.stopPropagation();
            alert('Child clicked');
        };
    }

按钮和主体onclick事件同时触发

2 个答案: